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>
Best way to add background image with css3 filters
Add the image using pseudo element, like this, and you can have other content floating on top.
If you get issues with the z-index: -1;
, which keep the image to stay in the background, you can remove it and give immediate children of the body position: relative
instead.
body { margin: 0; font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; background: #151626; height: 100vh;}
body::before { content: ''; position: fixed; height: 100%; width: 100%; background: url(http://mortenhjort.dk/food/assets/img/login/bg.jpg) no-repeat center center; background-size: cover; transform: scale(1.05); filter: blur(10px); opacity: 0.5; z-index: -1;}
div { color: white; font-size: 30px;}
<div>Hey there....</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;
}
How to add a background image on top of a previous background image?
You can consider CSS variables. Specify 2 background layer that you can change later. You can easily scale to any number of background:
.container > div { background: /*we make the default value a transparent image*/ var(--im1,linear-gradient(transparent,transparent)), var(--im2,linear-gradient(transparent,transparent)); height:200px; width:200px; display:inline-block;}
.background1 { --im2: url(https://picsum.photos/200/300?image=0);}
.background2 { --im2: url(https://picsum.photos/200/300?image=1069);}
.backgroundFilter { --im1: linear-gradient(to right,transparent,green);;}
<div class="container"><div class="background1">...</div><div class="background1 backgroundFilter">...</div><div class="background2">...</div><div class="background2 backgroundFilter">...</div></div>
Related Topics
Fill Parent Container and Reduce Image Resolution with Next/Image
How to Set The Width and Height of a Textarea Using CSS
CSS: How to Center Box Div Element Directly in Center
Apply External CSS to Specific Area
Why Does Input's Size Increase in CSS Grid Layouts
How to Automatically Add Browser Prefix to CSS3 Properties
CSS Transform Translate Breaking Youtube Embedded Video
Netbeans CSS Not Hinting All Properties
Build a Proper Alignment for a Footer
How to Make Three Columns The Same Height
Excluding First Element in CSS
Angular 2 - Jquery | Adding Styles (Top/Left) with a Mouse Position
Z-Index and Relative/Absolute Positioning
Outlook Rendering Problem, Rendering Text Too Large
CSS Media Queries Not Working in Safari