Is it possible to apply a CSS filter to a background image?

Question

I would 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 has a blur filter on it.

However, when I put it in the body, blurring occurs in everything except the background image.

Is there a way to apply blur only on the background image? (in addition to blurring in Photoshop or similar.

Answer 1

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

 filter: blur(20px) 

Demo here

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