"Background-image" formatting images in promo boxes

Using background image instead of an IMG tag gives some benefits in art direction when trying to fit an irregular shape image into a promo box (also known as "happens in almost every CMS in the world"). But the decisions you take - or the options you offer - need context from your requirements.

Background-image formatting could be considered "responsive", as the images always scale to the size of the container. But without associated media queries, it's just scaling the image, not chosing the right image for the right screen size, so it's up to you to do the right thing and not send large files scaled for small containers. You might also want to investigate SRCSET attributes and PICTURE tags as options.

One more point - background-size:cover/contain are IE9+. If you need IE8 support, this is not for you.

Example content

  1. vertical "lifestyle" shot
  2. horizontal "lifestyle" shot
  3. square-ish "logo"
  4. person portrait








Please scroll...











Example containers

We'll try to fit the content into these promo boxes.

vertical tile
horizontal tile








Please scroll...











OPTION 1: "Contain" the image within the available space

lifestyle vert
lifestyle horiz
logo
portrait
lifestyle vert
lifestyle horiz
logo
portrait

"Contain" always shows the whole image, leaving space around it if ncessary. It's good for logos and images that can't be clipped (eg product images, people portraits). But images that are less critical but more for aesthetics or atmosphere, it can leave ugly gaps and make them appear small.









Please scroll...











OPTION 2: "Cover" the available space

portrait
landscape
logo
portrait
portrait
landscape
logo
portrait

"Cover" fills the space available, even if it means chopping some of the image off. With lifestyle shots that just need to convey a feeling, it's much more attractive. But it's less useful for images that can't be clipped.