CSS blur on background image but not on content – Stack Overflow

CSS blur on background image but not on content [duplicate]

I did this example. I’m trying to blur the background image, but the main content is blurred too (the ) How can I blur the background without blurring the content?

3,747 4 4 gold badges 28 28 silver badges 40 40 bronze badges
asked Dec 5, 2013 at 21:35
49.3k 96 96 gold badges 226 226 silver badges 349 349 bronze badges

6 Answers 6

.blur-bgimage < overflow: hidden; margin: 0; text-align: left; >.blur-bgimage:before

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,747 4 4 gold badges 28 28 silver badges 40 40 bronze badges
answered Mar 3, 2015 at 3:17
2,560 26 26 silver badges 12 12 bronze badges

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?

Apr 8, 2018 at 13:35

@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.

Feb 6, 2019 at 7:30

: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.

Feb 6, 2019 at 18:37

You could overlay one element above the blurred element like so

div < position: absolute; left:0; top: 0; >p

3,747 4 4 gold badges 28 28 silver badges 40 40 bronze badges
answered Dec 5, 2013 at 21:44
Kevin Lynch Kevin Lynch
24.6k 3 3 gold badges 36 36 silver badges 38 38 bronze badges
sorry i cn’t use absolute on div 🙁
Dec 5, 2013 at 21:54

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.

Dec 5, 2013 at 21:57
sorry i unaccepted since on firefox it doesn’t works jsfiddle.net/jLGFp/3
Dec 6, 2013 at 13:53

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/….

Dec 6, 2013 at 14:57

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%; >

3,747 4 4 gold badges 28 28 silver badges 40 40 bronze badges
answered Dec 5, 2013 at 21:40
3,210 4 4 gold badges 27 27 silver badges 39 39 bronze badges
But this creates a scroll in the page 🙁
Jul 18, 2016 at 13:56

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.

From the MDN documentation page:

/* URL to SVG filter */ backdrop-filter: url(commonfilters.svg#filter); /* 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%); 

Leave a Reply

Your email address will not be published. Required fields are marked *