How can I achieve a background image with blur effect using CSS?
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)
}
I want to apply a blur effect only on the background image, not everything else.
How can this be achieved without resorting to editing software like Photoshop?