Blur Behind Div CSS
backdrop-filter: blur(10px);
It will blur area behind the element.
using a div to blur an image behind it?
Not with CSS on its own, but you can pull a similar effect off with Canvas and the StackBlurforCanvas library. See this
UPDATE: Looks like backdrop-filter
was recently introduced to Webkit nightly, so eventually we'll be able to do this with CSS only. Yay!
How to blur background image of div, without blurring the remaining site or the content of the div
Here is the solution
<body><header class="intro">
<div class="background-image"></div>
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading">Grayscale</h1>
<p class="intro-text">A free, responsive, one page Bootstrap theme.
<br>Created by Start Bootstrap.</p>
<a href="#about" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</header>
</body>
Css :
body {
width: 100%;
height: 100%;
font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: white;
background-color: black;
margin: 0;
padding: 0;
}
.intro {
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: white;
}
.intro .background-image {
z-index: -1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url(https://wallpaperbrowse.com/media/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg);
-webkit-filter: blur(10px);
filter: blur(10px);
}
.intro .intro-body {
z-index: 9999;
display: table-cell;
vertical-align: middle;
}
How to blur ALL elements behind a div (text, shapes, buttons - not just the background image). CSS only if possible
I blurred by background image externally, and then took out the blur in css (as people told me to for performance reasons in the comments).
After doing that, and without changing anything else, now my blur works on the navbar! It seems to be that the background blur was messing up a bunch of stuff.
Thank you for the help in the comments!
P.S. The fixed positioning that didn't work before now works?!?
To blur an element with no background image by css
What you are looking for is backdrop-filter
body { background-image: url(https://i.picsum.photos/id/174/800/800.jpg); background-attachment: fixed; background-size: cover; height: 100vh; margin:0; position: relative;}
.parent-div { position: relative; height:50vh; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
<div class=" parent-div"> <div class=" child-div"> <h4 class=" text-light">Hello world!!</h4> </div></div><div class=" parent-div"> <div class=" child-div"> <h4 class=" text-light">Hello world!!</h4> </div></div>
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>
Related Topics
How to Set Maximum Number of Rows in a Flexbox Container and Hide Extra Element
Outlook 2010 Not Respecting CSS, Even <Font> Tags for Every Text
Web Extension:How to Use "Browser_Style = True"
Lato Font Missing Letters in Ie and Firefox
Which CSS Pseudo-Classes Don't Have Specificity
React Table with Static Header on Browser Scroll
Scrolling Inside Nested Flexboxes
Flex Direction: Row-Reverse in React-Native
Force Elements to Be Horizontally Aligned
Create a Button with Right Triangle/Pointer
iOS Safari Transition Transform Not Working
How to Minify CSS Files with Requirejs
Change Colour Navbar Header Ionic 2
CSS 3 Animation "Transform: Scale" on Column Element Doesn't Work on Chrome