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>
css blur technique only for the background
You have to use two different containers, take a look here it will help you:
https://stackoverflow.com/a/20039965/4298050
CSS blur on background image but not on content
You could overlay one element above the blurred element like so
DEMO
div {
position: absolute;
left:0;
top: 0;
}
p {
position: absolute;
left:0;
top: 0;
}
CSS blur property only for background-image
I got your Codepen to work with the following CSS:
#home:before{
content: ""; /* CHANGE HERE! */
position: absolute; /* CHANGE HERE! */
z-index: -1; /* CHANGE HERE! */
display: block;
background:url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG') no-repeat;
background-size: cover;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
width: 100%;
height: 1080px;
}
.home{
text-align:center;
z-index: 0; /* CHANGE HERE! */
}
Add the ':before' pseudo-element to specify that content be inserted before the element selected (#home).
Setting position to absolute and changing the z-indices are important here since we have to do some rearranging of the elements.
More info about :before pseudo-element
https://developer.mozilla.org/en-US/docs/Web/CSS/::before
More info about z-index:
http://www.w3schools.com/cssref/pr_pos_z-index.asp
Related Topics
How to Adjust the Caret (Blinking Cursor) Size Inside Searchbar with CSS
Using a Percentage Margin in CSS But Want a Minimum Margin in Pixels
How to Center Content in a Div Using CSS
Pugjs(Jade) Template Engine Loading CSS File
Changing Background Cell of Table Depending on Value
CSS Styling Won't Work in Outlook 2010
Does IE9 Not Support Display: Inline-Flex at All
CSS Nth-Of-Type Selector with Nested Elements
When Does Flex-Grow Switch to Flex-Shrink, and Vice-Versa
Bootstrap Carousel as Website Background
Skew One Side Only of an Element
Less CSS - Change Variable Value for Theme Colors Depending on Body Class
Select All Elements After Specific Element
What Does Unset Value Mean in CSS
Jekyll Site Works Locally But Not on Github Pages
Which CSS Selector Can Be Used to Select a Flex Box Item in Wrapped State