css - 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:

body {
  background-image: url('http://www.publicdomainpictures.net/pictures/10000/velka/pebbles-and-sea-11284647414Rbeh.jpg');
  background-attachment: fixed;
  -webkit-filter: blur(5px);
}

I have been searching for a while but cannot find anyone resources describing how to do this.

Answer 1

FUTURE USERS: This is not supported in IE7, IE8, IE9, IE10, IE11 or the current version of EDGE.

DO NOT USE on a real site, unless you have a fallback.

If you're looking for a solution that doesn't rely on extra markup, you could apply the background image and filter to a pseudo element on the body.

body {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    height: 100%;
}
body:before {
    content: "";
    position: absolute;
    background: url(http://lorempixel.com/420/255);
    background-size: cover;
    z-index: -1; /* Keep the background behind the content */
    height: 20%; width: 20%; /* Using Glen Maddern's trick /via @mente */

    /* don't forget to use the prefixes you need */
    transform: scale(5);
    transform-origin: top left;
    filter: blur(2px);
}

Check it out this JsFiddle.