You can have an outer-container with a background-image, an inner-container with backdrop-filter: blur(5px) and an img inside the inner-container which is limited to the width of the outer-container:

body {
  margin: 0;
}

.container {
  margin: 0 auto;
  height: 500px;
  width: 500px;
  background: url("http://lowcadence.com/wp-content/uploads/2012/08/josiahrides.jpg");
  background-size: cover;
}

.image {
  display: flex;
  align-items: center;
  height: 100%;
  backdrop-filter: blur(5px);
}

img {
  width: 100%;
}

<div class="container">
  <div class="image">
    <img src="http://lowcadence.com/wp-content/uploads/2012/08/josiahrides.jpg" />
  </div>
</div>

Note: backdrop-filter isn’t supported in Firefox.

1st step: background-size: cover;

2nd step: background-size: contain; background-repeat: no-repeat;

3rd step is how I need it: first background image is cover and the second is an overlay with no-repeat

At this point my Html contains a div:
<div class="news" data-background="@item.ImageUrl">

I’ve tried a few things but I always can only add one picture to it and not a 2nd copy of itself.

How can I get a result as the far-right example on the image?

Some extra information about the SCSS-file

.vertical .news {
    position: relative;
    box-sizing: border-box;
    border-radius: 18px;
    background-position: center;
    background-size: cover;
    background-color: $DarkTurquoise;
    max-height: 85vh;
    height: 80vh;
    width: 30vw;
    margin-bottom: 3vw;
    margin-right: 1vw;
    margin-left: 1vw;
    overflow: hidden;
}