Small image hero

So you want to create a really large hero component or call to action with a focus on images to perhaps add some visual interest to the area or break up an otherwise fairly boring sea of flat boxes.

One big challenge will be to get really large images, in the correct (very narrow) aspect ratio, that are art-directed so they don’t cause problems with your text. Once that’s done, now you’re going to need to contend with the large file (and thus download) sizes of that hero image.

Okay, so there are some challenges. Hit the jump to see how I solved it.

Here’s how I solved it for a recent project:

  1. Use a reasonably sized featured image
  2. Stretch the heck out of that featured image to cover the background
  3. Put an overlay on top of the stretched background so that the text always works.
Large call to action using one reasonably sized photo
Large call to action using one reasonably sized photo

Yes, the photo will start to get all pixelated as it gets stretched. This is okay, it’s a background image that is covered with a dark overlay. It’s not the focal point.

background-size: cover is likely the best option here. No IE8 support, but there’s a polyfill.

Leave a Reply

Your email address will not be published. Required fields are marked *