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 can I make a CSS glass/blur effect work for an overlay?
I was able to piece together information from everyone here and further Googling, and I came up with the following which works in Chrome and Firefox: http://jsfiddle.net/xtbmpcsu/. I'm still working on making this work for IE and Opera.
The key is putting the content inside of the div to which the filter is applied:
body {
background: #300000;
background: linear-gradient(45deg, #300000, #000000, #300000, #000000);
color: white;
}
#mask {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.5;
}
img {
filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
position: absolute;
left: 100px;
top: 100px;
height: 300px;
width: auto;
}
<div id="mask">
<p>Lorem ipsum ...</p>
<img src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" />
</div>
Blur a background image via css
You can use the following CSS declaration to blur a background image:
filter: blur(value);
N.B. If you want the <div>
to contain other content but you wish to blur only the background image, then apply the background image and the blur to a ::before
pseudo-element.
Working Example:
.wpd-page-title {position: relative;width: 100%;height: 180px;}
.wpd-page-title::before {content: '';display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(https://picsum.photos/300/300) no-repeat;}
.blur-3px::before {filter: blur(3px);}
.blur-6px::before {filter: blur(6px);}
.blur-9px::before {filter: blur(9px);}
<div class="wpd-page-title"></div><div class="wpd-page-title blur-3px"></div><div class="wpd-page-title blur-6px"></div><div class="wpd-page-title blur-9px"></div>
How to blur background color of body using css?
Just set background separately from the body, i.e. you can use pseudoelement and filter just this pseudo
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
position: relative;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(100deg, #3B53D6,#4AFAFA);
filter: blur(10px);
}
CSS Blur Effect and Background Color
You can use @supports
to selectively apply your styles based on browser support:
.transparent-header {
background-color: rgba(0,0,0,0.9);
}
@supports (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
.transparent-header {
background-color: rgba(0,0,0,0.5);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
}
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
Related Topics
Why Doesn't This A:Visited CSS Style Work
How to Automatically Crop and Center an Image
How to Change the Bootstrap 4 Navbar Button Icon Color
How to Use Svg as Content in a Pseudo Element ::Before or ::After
Smallest Data Uri Image Possible For a Transparent Image
Position a CSS Background Image X Pixels from the Right
Font Awesome 5 - Why Aren't Icons Like Bitcoin, Facebook, Twitter Showing
Flushing Footer to Bottom of the Page, Twitter Bootstrap
Hover Effect: Expand Bottom Border
Css Media Query to Target Only iOS Devices
How to Reference One CSS Rule Within Another
Css3 Animation Not Working in Safari
How to Remove Dotted Border Around Active Hyperlinks in IE8 with CSS