I did this example.
I'm trying to blur the background image, but the main content is blurred too (the <span>)
How can I blur the background without blurring the content?
Add a comment |
6 Answers
.blur-bgimage { overflow: hidden; margin: 0; text-align: left; } .blur-bgimage:before { content: ""; position: absolute; width : 100%; height: 100%; background: inherit; z-index: -1; filter : blur(10px); -moz-filter : blur(10px); -webkit-filter: blur(10px); -o-filter : blur(10px); transition : all 2s linear; -moz-transition : all 2s linear; -webkit-transition: all 2s linear; -o-transition : all 2s linear; } You can blur the body background image by using the body's :before pseudo class to inherit the image and then blurring it. Wrap all that into a class and use javascript to add and remove the class to blur and unblur.
3 Comments
aless80
What is :before doing, exactly? I see that without :before the filters are applied to the whole content as well. I understand that, but why is :before preventing this?
vintprox
@aless80
:before is prepended to selected items (while :after is appended). Main difference from direct children of items is that :before and :after are accessed only through CSS and content property is mandatory for them to display.
Kardaw
:before and :after are pseudo-elements. If you write
.blur-bgimage:before {..} you're creating a new child-element for .blur-bgimage called ::before. Because it is one of the children of .blur-bgimage its properties (e.g. filter: blur(10px)) are independent of other siblings.You could overlay one element above the blurred element like so
div { position: absolute; left:0; top: 0; } p { position: absolute; left:0; top: 0; } 4 Comments
Filippo oretti
sorry i cn't use absolute on div :(
Kevin Lynch
You could blur the background image in photoshop prior to uploading it, Otherwise you will need to use javascript. There is currently no way of blurring a div without it's contents also becoming blurred with CSS only. Overlaying them is the only way unfortunately.
blur.js is good for this kind of thing.Filippo oretti
sorry i unaccepted since on firefox it doesn't works jsfiddle.net/jLGFp/3
Kevin Lynch
You didn't state you need firefox support in your question. Unless stated otherwise, the question it is assumed the method will only work in supported browsers. For firefox support
blur is not possible. You will need to use an svg which is a different question really. It is covered here css-plus.com/2010/05/….Add another div or img to your main div and blur that instead. jsfiddle
.blur { background:url('http://i0.kym-cdn.com/photos/images/original/000/051/726/17-i-lol.jpg?1318992465') no-repeat center; background-size:cover; -webkit-filter: blur(13px); -moz-filter: blur(13px); -o-filter: blur(13px); -ms-filter: blur(13px); filter: blur(13px); position:absolute; width:100%; height:100%; } 
1 Comment
Bruno Casali
But this creates a scroll in the page :(
backdrop-filter
Unfortunately Mozilla has really dropped the ball and taken it's time with the feature. I'm personally hoping it makes it in to the next Firefox ESR as that is what the next major version of Waterfox will use.
MDN (Mozilla Developer Network) article: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
Mozilla implementation: https://bugzilla.mozilla.org/show_bug.cgi?id=1178765
From the MDN documentation page:
/* URL to SVG filter */ backdrop-filter: url(commonfilters.svg#filter); /* <filter-function> values */ backdrop-filter: blur(2px); backdrop-filter: brightness(60%); backdrop-filter: contrast(40%); backdrop-filter: drop-shadow(4px 4px 10px blue); backdrop-filter: grayscale(30%); backdrop-filter: hue-rotate(120deg); backdrop-filter: invert(70%); backdrop-filter: opacity(20%); backdrop-filter: sepia(90%); backdrop-filter: saturate(80%); /* Multiple filters */ backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%); 
Comments
What you're looking for is the "backdrop-filter" property instead of just "filter".
Example:
backdrop-filter: blur(5px); ✔️
filter: blur(5px); ❌
Comments
<div> <img class="class" src="http://i0.kym-cdn.com/photos/images/original/000/051/726/17-i-lol.jpg?1318992465"> </img> <span> Hello World! </span> </div> What about this? No absolute positioning on div, but instead on img and span.
2 Comments
JMercer
Apologies, this is basically what @TreeTree said, forgot to scroll down.
Tariqul Islam
Shouldn't
img be a single tag?