How to apply a CSS 3 blur filter to a background i

Question

I have a JPEG file that I'm using as a background image for a search page, and I'm using CSS to set it because I'm working within Backbone.js contexts:

background-image: url("whatever.jpg");

I want to apply a CSS 3 blur filter only to the background, but I'm not sure how to style just that one element. If I try:

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);

just underneath background-image in my CSS, it styles the whole page, rather than just the background. Is there a way to select just the image and apply the filter to that? Alternatively, is there a way to just turn the blur off for every other element on the page?

Answer 1

As stated in other answers this can be achieved with:

• A copy of the blurred image as the background.
• A pseudo elment that can be filtered then positioned behind the content.

You can also use backdrop-filter

There is a supported property called backdrop-filter, it is currently supported in Edge, Safari and iOS Safari (see caniuse.com for stats).

From Mozilla devdocs:

The backdrop-filter property provides for effects like blurring or color shifting the area behind an element, which can then be seen through that element by adjusting the element's transparency/opacity.

You would use it like so:

.box {
  -webkit-backdrop-filter: blur(5px); // Use for Safari 9+, Edge 17+ (not a mistake) and iOS Safari 9.2+
  backdrop-filter: blur(5px); // No one supports non prefixed yet
}

For stats see caniuse.com

Answer 2

Of course, this is not a CSS-solution, but you can use CDN Proton with filter:

body { 
background: url('https://i0.wp.com/IMAGEURL?w=600&filter=blurgaussian&smooth=1');
}

from https://developer.wordpress.com/docs/photon/api/#filter