Как сделать динамичный background, при заданном filter:blur?

Question

[Сергей Поляков]

Помогите решить проблему. Есть header с содержимым, ему задал background-image, "заблюрил", задал linear-gradient, чтобы filter не вылез на весь блок header пришлось создать для этого отдельный блок .blur, туда же закинул весь фон, про который говорил выше, но проблема в том, что картинка в фоне не адаптивна по размерам. Нужно чтобы она подстраивалась под размер окна браузера, настройки размера с помощью background-size не работает. Буду благодарен за помощь.

<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 - не совсем понятно что это значит - но хоть img хоть background всё равно тянется