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.