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/

Answer 1

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

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