Delivering Episode 4: Understanding Background Images in Email

In this episode of Delivering, we’ll take a look at an essential technique for email designers: the humble—but powerful—background image. Learn why background images matter, how to code them using a variety of techniques, and how those various methods compare across different email clients. This episode is a companion to our recently updated Ultimate Guide to Background Images in Email. Check it out for tips, tricks, and code.

Be sure to subscribe to Delivering on iTunes or Spotify to listen to future episodes and join the conversation on Twitter using the hashtag #DeliveringPodcast.

Episode Transcript

There are a lot of ways to add interesting visuals to email campaigns.

While CSS allows for a lot of different styling options, sometimes you just need a good image. But what’s the best way to use images in email? In this episode of Delivering, we’ll take a look at an essential technique for email designers: the humble—but powerful—background image.

I’m Jason Rodriguez and welcome to Delivering, a podcast about email marketing and its place in the world. Delivering is brought to you by Litmus, the industry-leading platform for email marketers. Join over 600,000 email professionals who use Litmus to create, review, test, and track better email marketing campaigns. Find out more and get a free 7-day trial at Litmus.com.

Images are a staple of email marketing campaigns. They’re used for product shots, cute illustrations, logos, icons, and—in some cases—for the entire email itself. In the retail world especially, marketers are prone to designing campaigns entirely in tools like Photoshop, slicing those images up, and dumping them into HTML before sending to subscribers. All of the information—headlines, copy, calls-to-action, whatever—exist within images.

It’s a good way to adhere to brand guidelines and produce emails quickly, but using images in this way has some major drawbacks.

The first is that a lot of email clients disable images by default. The images—and all of the content—in an email are literally left unloaded by the email client, resulting in blank campaigns that look broken to a lot of subscribers.

The second is that subscribers using assistive technology, like screen reader software, won’t be able to experience the content in the email.

In both cases, all of the copy, deals, and value you spent time putting into your email campaign have essentially gone to waste. There has to be a better solution, right?

Enter background images.

Background images are simply images, like any other in an email. They are files uploaded to a server and linked to in code. The difference is that background images are applied not with an HTML image tag, but as an attribute or CSS on other HTML elements.

There are four ways to code background images, each with their pros and cons.

The first, and more traditional method, is by applying the background attribute to a table cell. The value of the attribute is just the URL that points to the image. This method is cool because it’s fairly well-supported across email clients. The major downfall, however, is that it’s not very flexible. You can’t control the sizing of your background image and the image will, by default, repeat across your element.

You can also load background images using CSS. The following two techniques use the same method, but are applied differently.

CSS has a number of background properties, most notably: background-image, background-repeat, background-position, background-size, and background-color. There’s also the super helpful background shorthand property.

Using these properties, you can include the URL to an image, control how that image is positioned and whether or not it repeats, as well as include a fallback color for when images aren’t loaded.

The first way to use CSS backgrounds is by embedding those properties in a style block in the head of your email. Just target an HTML element like a table cell or div, and have at it. This method is easy to code, read, and maintain, but embedded styles aren’t supported in all email clients.

A more robust method is by including those properties inline on your HTML element. This can get messy if you’re using background images on multiple elements but, since we’re email geeks and used to using inline images, it’s still perfectly manageable.

The final way to include background images in an email is by using what are called “bulletproof backgrounds”. Bulletproof backgrounds build on top of the HTML attribute method by also including VML—or Vector Markup Language—in the code. VML is a proprietary Microsoft language used in Office products like Outlook. By applying background images in VML, they’ll work in Microsoft Outlook, which isn’t necessarily true for the other methods previously discussed.

The major downside of using VML is that it’s not very accessible or well-documented, and it adds a lot of code that is, frankly, hard to understand. To make it easier, our friends at Campaign Monitor have actually built an amazing tool for generating bulletproof backgrounds. You can find it, conveniently, at backgrounds.cm.

Regardless of which method you choose, there are amazing benefits to using background images in email over traditionally coded images.

The main benefit is accessibility. By using background images, you can rely on live, HTML text instead of images for all of your content. Text doesn’t suffer from blocking like images, so even when images are turned off, your message will still be readable for subscribers. And, for users that require screen readers, they’ll be able to hear content read out to them, unlike with traditional images.

You can use CSS to style that HTML content so that it looks well-designed like images coming out of Photoshop, and you can even include CTA buttons in there, too.

Background images, then, are used to include additional visual styling, whether that’s a simple gradient, some fancy product shots, or a repeating pattern. They work in conjunction with HTML text to create beautiful and usable emails.

What’s even cooler is that you can do more advanced stuff like including animated GIFs as background images, swap images based on screen size or device, or even code a video background like we did a few years ago for our Litmus Live announcement email.

There’s a lot that goes into utilizing background images to their fullest. We recently published an update to our Ultimate Guide to Background Images in Email on the Litmus blog that’s worth checking out. It’s a great way to look at the code powering background images, as well as get inspiration for updating your own campaigns. Just head over to today’s show notes for the link.

And be sure to subscribe to Delivering on iTunes or Spotify to listen to future episodes where we dig into more techniques for building better HTML emails.

Jason Rodriguez

Jason Rodriguez was the Community & Product Evangelist at Litmus