in Crafts

Using CSS Blur to add full-width image background

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.

Also on:

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Webmentions

  1. Martin Trugschluss liked this article on twitter.com.

    • Related Content by Tag