Read on to learn about:
- What background images are?
- Why they work so well in email design?
- Background images and responsive emails
- Tips for using background images in your emails
Let’s dig in.
What Are Background Images and Why Would You Use Them?
As the name suggests, a background image is an image that goes into the background of any given element in your email. That might be a background to the whole email content area, but depending how you build your emails, it’s more likely that you’d use it to fill a particular block or a cell in a table.
The important thing about background images in HTML emails is that you put them behind other types of content. Typically that means you have text or CTA buttons appear on top of the image in the email.
This is really handy for email design because you can’t be certain that the recipient’s email client will automatically display any images you include. With normal images, that means that your beautifully designed email could end up full of empty space that people need to scroll past to get to the useful information. Or that any text that you worked into the image as a single graphic will be lost.
With background images, you don’t run that risk. Even if the image itself doesn’t show up properly, the foregrounded text will. Plus, you can use them to add visual interest by layering different elements in your email.
A Word of Warning
We’ve talked before about why it’s crucial to make your emails responsive. That’s even more important when you’re working with images, as well as with layered elements designed to complement each other perfectly.
You need to be sure that your complex design elements will adapt seamlessly to any kind of screen. Stick to a single column, don’t use massive images and pick an email marketing platform with built-in responsiveness, and which lets you test and view emails in different formats before you hit send.
How to Incorporate Background Images in Your Emails
Here are three examples of striking, effective uses of background images to get you inspired.
National Geographic: Planet or Plastic
The background image here is a gorgeous piece of design that cleverly brings the core message of the email to life. Not only that, the pyramid shape draws the eye from the logo through the final call-to-action button and the blue perfectly offsets the yellow of the logo and the CTA underlining.
Even more importantly, even if the background image doesn’t load, the key information will still be visible to the recipient.
Under Armor – The Huddle
This is another great example of how you can weave text and images together for clean, visually arresting design without the risk of losing important information if the images fail to load.
Taco Bell – The Board Game
This one was extra clever because rather than an image, it uses a GIF image in the background. As a result, it appears to be snowing and the hand moves between each option, giving you a taste of the game and enticing you to play.
Even though the moving GIF contributes so much to the effect, the email still makes sense without it. This is key.
As we’ve seen, the major benefit of using background images in email is that you can create versatile, beautiful designs without the risk of losing key elements if images won’t load. Don’t lose sight of that point. While images and GIFs can elevate your emails, you don’t want to make the mistake of making them integral to the content of the email. Otherwise, if they don’t load, you’re back to square one.