If you are referring to it adopting the color behind it, then you would need to provide it with a background-color
, but if you just want it to be a square instead then try this edit of your original code: http://jsfiddle.net/Incredulous/6V9ua/
I've removed your duplicate CSS for the img
selector and added a px
to the end of your -20. Your CSS now looks like this:
body{
background:red;
text-align:center;
}
img{
-webkit-filter: blur(20px);
-moz-filter: blur(20px);
filter: blur(20px);
margin:-20px;
}
div{
overflow:hidden;
display:table;
background-color:white;
}
I added the display:table;
to make your div fit the content inside it and the background-color:white;
to remove the bleeding of the red on the edges.