Is it possible to use -webkit-filter: blur(); on background-image?

Question

Is it possible to use -webkit-filter: blur(); on background-image?

I have tried this code and it just blurs everything but the background-image:

Answer 1

Don't apply it to the body, apply it to a full size container as below, set the container size and position to absolute and then the rest of the content to relative and set the z-indexes.

​


 Some text and stuff here
​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

.bgImageContainer{
    background-image:url('http://www.whitegadget.com/attachments/pc-wallpapers/16950d1224057972-landscape-wallpaper-blue-river-scenery-wallpapers.jpg'); 
    width:500px;
    height:400px;
    -webkit-filter: blur(5px);
    z-index:0;
    position:absolute;
}
.content{
    z-index:10;
    position:relative;
}

Edit - Updated the fiddle, the old image wasn't working any more.

http://jsfiddle.net/Yr2zD/1130/