How to make dynamic background with filter:blur set?

Question

css

Help solve the problem. There is a header with content, it was given a background-image, "blurred", set a linear-gradient, so that the filter does not get out on the entire header block, I had to create a separate .blur block for this, I also threw the whole background, which was mentioned above, there, but the problem The fact that the image in the background is not adaptive in size. We need it to fit the size of the browser window, adjusting the size using background-size does not work. I will be grateful for help.

<section id="top-nav" class="container-fluid top-nav">
  <div class="blur"></div>
</section>

.top-nav {
  height: 100vh;
  background-color: #000;
  position: relative;
}

.blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background: linear-gradient(45deg, #f8a261, #6e9fc9), linear-gradient(135deg, #08526b, #fbcd7c), 
  url(../img/bg-1.png) no-repeat scroll;
  background-blend-mode: overlay, color;
  -webkit-filter: blur(3px);
}

Answer 1

https://codepen.io/topicstarter/pen/XyvPgE - it's not entirely clear what this means - but at least img at least background still stretches