Blurring image resulting in blur taking in elements from outside the container / div

Question

I have this very simple pen of a blurred background image.

HTML

<div> </div>

CSS

div {
  background: url(http://s15.postimg.org/4elomwgbv/luxvitae.jpg) no-repeat;
  width: 1500px;
  height: 1000px;
  -webkit-filter: blur(25px); 
  -moz-filter: blur(5px); 
  -o-filter: blur(5px); 
  -ms-filter: blur(5px); 


     filter: blur(5px);
    }

body{
  background-color: green;
}

Now what happens is that the blur actually takes into account the surrounding or lying below elements, which i don't like

enter image description here

It basically shows the background where there should be no background, and blurs the image into the background. What I want is to see: no green overlapping into my div container. My div should only contain the image that is blurred.

someone got an idea?

You do realize that this(`blur`) will only work on `-webkit-` browsers, right? — Weafs.py, Jan 13 '15 at 22:38
What you are asking doesn't make any sense. You can't blur the image into nothing. There is always something, a color, or the background... I think you are asking that the image be blurred into white or black? — PressingOnAlways, Jan 13 '15 at 22:40
@chipChocolate.py Working fine for me in Firefox as of today. — Alexander O'Mara, Jan 13 '15 at 22:53
@AlexanderO'Mara - [Because you are on Firefox v35+](http://caniuse.com/#search=filter). Does not work for me. — Weafs.py, Jan 13 '15 at 22:54

score 1 · Answer 1 · answered Jan 13 '15 at 22:45

This is because a blur also feathers the edge. You could layer the blurred image on top of the image using a pseudo-element, although the edge won't be blurry for obvious reasons.

Example (click the "Full page" button):

.blurimg {
  background: url(http://s15.postimg.org/4elomwgbv/luxvitae.jpg) no-repeat;
  width: 1500px;
  height: 1000px;
  position: relative;
}
.blurimg:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: inherit;
  -webkit-filter: blur(5px); 
  -moz-filter: blur(5px); 
  -o-filter: blur(5px); 
  -ms-filter: blur(5px); 
  filter: blur(5px);
}

body{
  background-color: green;
  margin: 0;
}

<div class="blurimg"> </div>

Blurring image resulting in blur taking in elements from outside the container / div

1 Answers1

Example (click the "Full page" button):