Can I apply a CSS filter to a background image?

Question

I'd like to have a picture in the background like this

body{

    background-color: transparent !important;
    background-image: url("img.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px)


}

but also have a blur filter on it.

However, when I put it on the body , the blur is on everything but the background image.

Is there a way to apply the blur only on the background image? (besides doing the blur in photoshop or similar.

Answer 1

Blur will work on background image of any container except body.

filter: blur(20px)

Demo is Here

https://jsfiddle.net/scheinercc/Yr2zD/1128/