Blur the background, not the content

Published: December 1, 2021By Sebastian

Learn how to blur a CSS background image on a container element without also blurring the content inside.

Not mentioned in the video – if you don’t want the edges of the background image to be blurry, set overflow to hidden on the regular container element (find the option in the Behaviour property group).

00:00 Start of video
00:09 It's tempting to set blur directly on the container element
00:19 A trick for finding which element has the background image setting
1:10 Create a ::before pseudo element to set the background image on
2:36 We set position to relative on the regular container element BTW
3:15 On the ::before element set position:absolute; content: ' '; width: 100%; height: 100%'; background-image: url(pic.png); z-index: -1;
4:43 On the ::before element set the blur value (via the Filter options)
Close