Using CSS Blur to add full-width image background

Jul 28, 2018 13:24 · 99 words · 1 minute read css

Many designs require the implementation of full-width imagery while restricting the component’s height at the same time.

Blurred Hero Component

Today I came up with this simple idea that may help in some situations: Put a blurred version of the hero image in the background, reduce its opacity and make it span the entire width. Place the actual image above and restrict its width to a dimensions that makes it easier for content editors to find a fitting image.

Bonus points: when using a small resolution for the blurred image it could serve as a placeholder while loading the high res version.