How to keep css background image blurred inside a container?

Question

When I blur a image it overflows the parent container, even specifying overflow to be hidden. Is there a way to keep the blurred edges inside dimensions?

The image needs to be as css background and not inside tag

Example not working:

.box{
    width: 300px;
    height: 300px;
    border: 1px solid red;
    overflow: hidden;
}

.blur{
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-filter: blur(20px);
    background: url("https://news.slac.stanford.edu/sites/default/files/imagecache/Img350_Scale/images/image/demag-300h.jpg");
}

http://jsfiddle.net/tMjsJ/1/

score 9 · Accepted Answer · edited May 23 '17 at 12:23

9

It can be achieved by applying a margin to the child element and overflow:hidden to the parent.

.box {
    overflow: hidden;
    margin:5px;
}

.blur {
    -webkit-filter: blur(20px);
    margin: -5px 0 0 -5px;
    background: url("https://news.slac.stanford.edu/sites/default/files/imagecache/Img350_Scale/images/image/demag-300h.jpg");
    height:300px;
    width:300px;
}

See an example here: http://jsfiddle.net/n1ck/tMjsJ/5/

As Joshua pointed out, it is the same technique as used here: Defined Edges With CSS3 Filter Blur

edited May 23 '17 at 12:23

Community

1
1

answered Mar 08 '13 at 03:08

N1ck

2,001
16
23

1

Intriguing @n1ck - applying ANY negative margin seems to do it. Is this Webkit's version of a haslayout issue? ;-) – Joshua Mar 08 '13 at 15:04

score 2 · Answer 2 · edited May 23 '17 at 11:44

2

So, apparently, this doesn't seem to work on background images. Quite interesting find :) A similar but not exact post was demonstrated here:

Defined Edges With CSS3 Filter Blur

I would imagine that if you want to accomplish the same effect, try changing from using a div with a background image to an image itself, using width / height of 100%.

Edit: Check out @N1ck's answer. Applying a negative margin (even -1px) works seems to trigger the proper effect. Nice.

Also - to avoid the bleeding background color (white), or at least manage it better, try setting a background color in addition to the image.

edited May 23 '17 at 11:44

Community

1
1

answered Mar 08 '13 at 02:52

Joshua

3,615
1
26
32

Thanks for the answer and tips. To avoid bleeding the white With background color works, but is a little less trivial with images background. – Luccas Mar 08 '13 at 18:40

How to keep css background image blurred inside a container?

2 Answers2