How to apply a css filter to a background image

CSS filter property can be used to apply graphical effects to web elements, such as blur, brightness, and contrast. It can not only be applied to standard elements but also to background images. To apply filter effects to the background image of an element, there are typically several methods:

1. Apply directly to the element: You can use the filter property directly on the element containing the background image. This will apply the filter effect to the entire element (including text content and the background image).

css
.background-filter {
  background-image: url('image.jpg');
  filter: blur(5px);  /* Apply blur effect */
}

1. Use pseudo-elements: If you only want to apply filter to the background image without affecting other content, you can use pseudo-elements. By applying the background image to ::before or ::after pseudo-elements and using filter on that pseudo-element, you can ensure that only the background image is affected by the filter effect.

css
.background-filter::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url('image.jpg');
  background-size: cover;
  filter: blur(5px);  /* Apply blur effect */
}

.background-filter {
  position: relative;
  z-index: 1;
}

1. Apply filter to parent element: You can also apply the filter effect to the parent element of the element containing the background image. This method will affect the background image and any child elements.

css
.background-filter-parent {
  filter: blur(5px);  /* Apply blur effect */
}

.background-filter-child {
  background-image: url('image.jpg');
}

In these examples, we used the blur() function as the value for filter, which applies a blur effect to the selected element. CSS filter also supports other functions such as brightness(), contrast(), grayscale(), sepia(), hue-rotate(), invert(), opacity(), and saturate(), which can be combined as needed to achieve different visual effects.

Here's a straightforward solution for modern browsers using pure CSS with the :before pseudo-element, similar to Matthew Wilcoxson's approach.

To avoid the need to access pseudo-elements for modifying images and other properties in JavaScript, simply use inherit as the value and access them through the parent element (in this case, body).

css
body::before {
    content: ""; /* Important */
    z-index: -1; /* Important */
    position: inherit;
    left: inherit;
    top: inherit;
    width: inherit;
    height: inherit;
    background-image: inherit;
    background-size: cover;
    filter: blur(8px);
}

body {
  background-image: url("xyz.jpg");
  background-size: 0 0;  /* Image should not be drawn here */
  width: 100%;
  height: 100%;
  position: fixed; /* Or absolute for scrollable backgrounds */
}

For this purpose, you need to restructure the HTML. You must blur the entire element to achieve a blurred background. Therefore, if you only want to blur the background, it must be a separate element.

As other answers have noted, this can be achieved by:

• Creating a blurred copy of the background image.
• Using a pseudo-element that is filtered and positioned behind the content.

You can also use the backdrop-filter property

This property is currently supported by Chrome, Firefox, Edge, Safari, and iOS Safari (see caniuse.com for statistics).

From Mozilla Developer Documentation:

The backdrop-filter property provides effects such as blurring or color shifting the area behind the element, which can be seen through the element by adjusting its opacity/transparency.

See caniuse.com for usage statistics.

You would use it like this. If you don't want the content inside to be blurred, use the utility class .u-non-blurred.

shell
.background-filter::after {
  -webkit-backdrop-filter: blur(5px); /* Use for Safari 9+, Edge 17+ (not a mistake) and iOS Safari 9.2+ */
  backdrop-filter: blur(5px); /* Supported in all major browsers */

  content: "";
  display: block;
  position: absolute;
  width: 100%; height: 100%;
  top: 0;
}

.background-filter {
  position: relative;
}

.background {
  background-image: url('https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg');
  width: 200px;
  height: 200px;
}

/* Use for child content that should not be blurred */
.u-non-blurred {
  position: relative;
  z-index: 1;
}

<div class="background background-filter">
  <h1 class="u-non-blurred">Kermit D. Frog</h1>
</div>