How to Apply a CSS Filter to a Background Image

How to apply a CSS filter to a background image

Check out this pen.

You will have to use two different containers, one for the background image and the other for your content.

In the example, I have created two containers, .background-image and .content.

Both of them are placed with position: fixed and left: 0; right: 0;. The difference in displaying them comes from the z-index values which have been set differently for the elements.

.background-image {
position: fixed;
left: 0;
right: 0;
z-index: 1;
display: block;
background-image: url('https://i.imgur.com/lL6tQfy.png');
width: 1200px;
height: 800px;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}

.content {
position: fixed;
left: 0;
right: 0;
z-index: 9999;
margin-left: 20px;
margin-right: 20px;
}
<div class="background-image"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend
rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing,
quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.</p>
<p>Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum
tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula.</p>
</div>

How to apply css filters to fixed background image

You can try the code below.

    .fixed-background {        position: relative;    }        .fixed-background::before {        content: "";        position: absolute;        top: 0;        left: 0;        width: 100%;        height: 100%;        background-image: url("https://i.picsum.photos/id/237/1600/1600.jpg");        background-size: cover;        background-attachment: fixed;        background-position: center;        min-height: 100vh;        filter: grayscale(100%);    }  .fixed-background  .container {        position: relative;    }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>    <section id="section-toTheTop"    class="jumbotron jumbotron-fluid fixed-background d-flex justify-content-center align-items-center">    <div class="container text-center">        <h1 class="display-1 text-primary">PHOTOSERVICE</h1>        <p class="display-4 d-none d-sm-block text-white">Capture every moment</p>        <p class="lead text-white">Create stunning photos and videos by using the built-in features for enhancement.</p>        <p class="lead text-white">Share your best shots with your friends and the rest of the world instantly.</p>        <p><strong class="text-white">Download now on:</strong></p>        <a href="#" class="btn btn-primary btn-lg"><i class="fab fa-fw fa-apple"></i> App Store</a>        <a href="#" class="btn btn-primary btn-lg"><i class="fab fa-fw fa-google-play"></i> Play Store</a>     </div>     </section>

Apply filter to a section background image

You can add the background on the :before, and put that behind the content:

.bg-test {
position:relative;
background:none;
}
.bg-test:before {
content:"";
display:block;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:-1;

/* Add Blur */
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);

/* Background */
background-image: url('../img/header.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}

Can I apply a CSS filter to a background image?

Blur will work on background image of any container except body.

filter: blur(20px)

Demo is Here

https://jsfiddle.net/scheinercc/Yr2zD/1128/

How do I apply two filters on a background image?

The ::before pseudo element gets hidden behind the element itself (because of the negative z-index), and because that element has the same (un-manipulated) background, the pseudo element gets effectively hidden.

It would work this way, if you could set the background for the pseudo element only, and leave the element’s background transparent - but if you need to use background: inherit to get the pseudo element to inherit the parent’s background that was set via inline style, it can’t work this way.

Your only option then is to get your pseudo element positioned between the element’s own background, and its content - so effectively you need to elevate all content “one level up” - in the simplest way that could be done using

.front-layout > * {
position: relative;
z-index: 1;
}

https://jsfiddle.net/9sfqd7te/6/

Depending on what the element actually contains, and whether those descendants are themselves positioned in any way, it might work with only that; or you might have to make adjustments (like exclude certain elements from getting relative position applied if they are otherwise positioned already, and/or not overwrite a higher z-index they might already have.)

(.front-layout > * limits this to the children of the parent already, descendants further down the tree are no affected.)

How do I make the background image for my page blurry without affecting any of the other content on the page?

After body, you need to add a<div>tag with the css property:backdrop-filter: blur (1px);before the rest of the page.

Here's an example:

body {
margin: 0;
padding: 0;
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/NGC_4414_%28NASA-med%29.jpg/1024px-NGC_4414_%28NASA-med%29.jpg');
color: #fff;
width: 100%
}

main {
width: 50%;
border: 5px solid red;
}

#amazing__filter{
backdrop-filter: blur(4px);
background: #ffffff20;
width: 100vw;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
flex-direction: column;
}
footer {
width: 100%;
height: 40px;
}
<html>
<head>
</head>

<body>
<div id="amazing__filter">
<main>
<header>
<h1>
A spectacular solution to the problem
</h1>
</header>
<h2>
List of the same words to fill the page
</h2>
<ol>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
<li>List element</li>
</ol>
</main>
<aside>
</aside>
<footer>
<p>Footer</p>
</footer>
</div>
</body>
</html>


Related Topics



Leave a reply



Submit