Rozmazane tło - CSS

Question

Jak uzyskać rozmazana tło?

Stosuje kod 

background-image: url('img/montaz.jpg');

Tło te jest dla elementu  div który ma znaczniki <h1>. Kiedy używam standardowego  

filter: blur(8px);

wszystko zostaje rozmazane. Czy istnieje inny kod do rozmazania tylko tła?

Answer 1

Do jakiego selektora zastosowałeś filter? Do h1? Zastosuj go tylko do obrazka.

Comments

Cały kod wygląda następująco:

	<div class="jumbotron jumbotron-fluid text-white text-center top">
		<div class="container">
			<h1 class="text-uppercase top-header">Odkryj <span class="text-warning">nową jakość</span> montażu</h1>
			<p class="top-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quam in nostrum?</p>
		</div>
	</div>

.top {
	padding: 165px 0 175px;
    margin: 0;
	background-image: url('img/montaz.jpg');
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

 

Answer 2

Tu masz odpowiedź: https://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image

W skrócie: jeden pojemnik na obrazek (i styluj go jak chcesz), drugi na content. Content leży na obrazku.

Comments

Niestety nie udaje mi się dobrze zaimplementować tych klas. Czy byłbyś w stanie wysłać tu przerobiony kod. Serio próbowałem wiele kombinacji.  

+obu elementom daje pozycje fixed, co z resztą elementów na stronie?