The Ultimate Guide to Background Images in Email

There are a lot of different design techniques you can use in an email campaign. Although animated GIFs, typography, and responsive design are almost commonplace these days, there is one design technique that is often overlooked or misunderstood: background images. What are background images? And how can they be used to help improve an email campaign?

In this guide to background images in HTML email, we’ll answer those questions and take a deep dive into putting background images to work in your own campaigns.

What are background images?

Background images are easy to define but, like a lot of things in HTML email, they can be complicated to actually implement. Background images are images that are applied to the background of an element in an email. Instead of being a main focal point of the email, like a hero image, they are more often subtle and complementary to the other content in the campaign.

The major benefit of using background images is that they allow you to place additional HTML content on top of them. Unlike other images, where only the image itself can exist in that space, background images provide layering possibilities, so that you can have additional images, text, or calls-to-action existing within that same space.

A major (and good) side effect of using background images over regular images is that any of the HTML content on top of the background image remains accessible even when images are disabled. Using live HTML text on top of a background image, instead of including that text as part of the image, ensures that your message is still readable by subscribers when images aren’t displayed. It’s a key technique for making better, more accessible HTML emails.

Images disabled: background image vs.
all-image hero.

Background images also allow for a wealth of design possibilities that can help set your campaigns apart from the competition. By layering background images and other HTML content, you open up a world of possibilities.

Let’s look at a few examples:

Wistia’s playful background fits perfectly for their brand and message.

Our own emails make use of bold background images.

A beautiful, full-width background image from Staatsbosbeheer.

Airbnb uses gorgeous photography in their background images to inspire a sense of adventure.

On Running puts their shoes where they belong: out in the wild.

Background images don’t have to be static, either. Animated GIFs can be used for the image, which can provide a beautiful and fun sense of movement in an email.

Taco Bell adds a ton of life to their emails using animated background images.

eROI keeps things subtle with just a hint of animation in their backgrounds.

Background images are a key tool that any email marketer needs to master. But how are they implemented? And what kind of problems can you run into using background images? Let’s find out.

Designing Background Images

Before you start coding a background image, you first need to design one (or a few). When designing background images, simpler is usually better. Background images are often an addition to other content, not a replacement for it. So you want those background images to enhance rather than distract from the main content in your campaign.

Graphic elements like gradients, patterns, and textures are excellent candidates for background images. They add visual interest to the email without overpowering the rest of the content. A good example of using texture in a background image can be found in this email from InVision.

Patterns also work really well. If you really want to set your email apart from other campaigns, you could even use an animated GIF as a background image, like Campaign Monitor did for one of their newsletters.

The effect is subtle, but it adds a lot of dimension to the email and forces subscribers to look twice at an email they might otherwise ignore.

Don’t be afraid to push the boundaries of what you can do with background images, though. They can be put front-and-center with bold imagery, too. This email from Channel Four uses large shots from the series to promote the new season of Fargo.

Paired with the simple but bold typography and copywriting, it makes for a unique and captivating email campaign.

Background Images on Mobile

You can also achieve some interesting effects by targeting desktop and mobile devices and adapting background images for those devices. Annett Forcier shared this great example of background image swapping via YouTube:

By using media queries to target different screen sizes, Annett updates the background image via CSS to pull in a different image for those different sizes.

One thing to keep in mind when designing background images for mobile—especially on high DPI displays—is that you can easily run into issues with really large images. Nearly half of all email opens happen on a mobile device, but larger, retina-friendly images, can often slow down email load times and cut into users’ data plans. You should always optimize your images for mobile.

 

Additionally, when background images shrink down for mobile devices, you can lose context for your background image if that image contains some vital piece of information. That’s one reason why you should always keep the most important information in an email as live HTML text, which can be better manipulated on mobile and stays visible even when images are disabled. There are a few CSS properties that can be used on background images to help prevent issues on mobile, but they aren’t supported everywhere, so it’s a good idea to design your background images with mobile in mind from the start.

Coding Background Images

Like most things in the HTML email world, background images can be implemented in a few different ways. Let’s take a look at the three main methods for including background images in a HTML email.

1. Using Table Attributes

The first method—and the one that’s been in use the longest—is by utilizing the classic background attribute on a table or table cell. Although the the background attribute is now deprecated, because of HTML’s backwards compatibility and forgiving quirks mode, it still works. The background attribute takes a URL as its value, which is where your background image is hosted.

<td align="center" bgcolor="dodgerblue" background="http://path.to/image.png"></td>

Although this works, it isn’t very flexible. By default, your background image will repeat across both the X and Y axis. Depending on the size of your image, that can result in unexpected and unwanted behavior. You also can’t position or resize the background image, which is often useful—especially on today’s mobile devices.

An additional attribute that you should include when using this approach is the bgcolor attribute, which provides a fallback color for when a background image can’t be displayed or doesn’t fill up the available space. This is necessary for two major reasons:

1. It maintains the overall design aesthetic even when images aren’t displayed
2. It ensures that HTML content on top of the background image is still readable and accessible, especially when using white or lighter color text on a dark background

The bgcolor attribute is also deprecated, but still works in most browsers and email clients. However, there’s a better way to use background images in your HTML emails…

2. Using Inline CSS

A more robust and flexible method is using the CSS background-image property inline on an element like a div or td.

<td align="center" style="background-image: url('https://path.to/image.png');"></td>

The background-image property again takes a URL, which is how you point to your background image. While that code will pull in the your image, using it by itself results in the same problems as the background attribute, namely that it repeats and doesn’t allow for resizing or positioning.

If you want to prevent the background image from repeating, you can add in the background-repeat property:

<td align="center" style="background-image: url('https://path.to/image.png'); background-repeat: no-repeat;"></td>

This can take a few different values, but the most common one is no-repeat, which will stop the image from repeating on both the X and Y axis.

If you want your image positioned somewhere else besides the default of top left, you can use the background-position property with a few different values:

<td align="center" style="background-image: url('https://path.to/image.png'); background-repeat: no-repeat; background-position: top center;"></td>

One of the most useful background properties, though, is the background-size property. It allows you to state how the background image should be sized to cover the available space in which the image is displayed. This is especially useful on mobile, where the amount of space is often limited. Instead of letting the device default to shrinking down your background image, you could use a value like cover or contain to more gracefully display the background image.

<td align="center" style="background-image: url('https://path.to/image.png'); background-repeat: no-repeat; background-position: top center; background-size: cover;"></td>

Finally, the last significant background property is the background-color property, which determines a fallback color for when the background image isn’t displayed or doesn’t fill up the entire containing element.

<td align="center" style="background-image: url('https://path.to/image.png'); background-repeat: no-repeat; background-position: top center; background-size: cover; background-color: gold;"></td>

That can be a lot to remember when building an email, so it’s useful to save your background image for reuse later on. Or, if you want, you can rely on the background CSS property, which is a shorthand for all of those properties above. Using the background property, the above could be condensed into the following:

<td align="center" style="background: url('https://path.to/image.png') blue no-repeat cover;"></td>

That’s a lot cleaner but it’s still a bit messy and hard to navigate within the HTML of your email. Let’s see how separating the styles from the HTML can help clean things up.

3. Using Embedded CSS

If you don’t want to bloat the code in your email, you can embed all of that CSS in a stylesheet in your HTML email instead. Although embedded CSS in email used to be frowned upon, it’s actually widely supported these days. To embed your background image properties, you first need to target an element in your HTML either directly or by referencing an ID or class:

<td class="bgImage"></td>

Then, open a stylesheet in the head of your email using the style tag, reference the HTML element on which you’re including the background image, and add your CSS:

<style> .bgImage { background-image: url('https://path.to/image.png'); background-repeat: no-repeat; background-position: top center; background-size: cover; } </style> 

Now, for clients that support embedded CSS, your background image will be visible just as if you had inlined it directly on the element. Plus, your HTML is easier to read and update when needed.

4. Using Bulletproof Backgrounds

Another well-known and useful technique for including background images is what’s usually known as “bulletproof backgrounds”. This technique was popularized by Stig Morten Myre from Campaign Monitor.

Bulletproof backgrounds combine the attribute method described above with Microsoft’s Vector Markup Language (VML) to ensure that background images are displayed nearly everywhere—especially in Microsoft’s Outlook suite of email clients. Using VML’s v:fill tag, you can include a background image that Outlook will render, then fallback to the background attribute for non-Outlook clients.

<table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td background="https://i.imgur.com/YJOX1PC.png" bgcolor="#7bceeb" valign="top"> <!--[if gte mso 9]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;"> <v:fill type="tile" src="https://i.imgur.com/YJOX1PC.png" color="#7bceeb" /> <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"> <![endif]--> <div> </div> <!--[if gte mso 9]> </v:textbox> </v:rect> <![endif]--> </td> </tr> </table> 

Even in its heyday, VML was never well-known. It’s lack of accessible documentation and the various quirks of Outlook can make it problematic to use. Plus, that’s a lot of code to understand and maintain when you need to make updates. Fortunately, Stig and the folks over at Campaign Monitor have released a free tool for generating bulletproof background code. Check it out at backgrounds.cm.

Advanced Techniques

Background images, especially when using inline or embedded CSS, allow for a ton of flexibility and even some more advanced design options like content choreography and image swapping when combined with CSS media queries. A great overview of some of these techniques can be found in Kristian Robinson’s excellent talk, Background Images: Design, Build, and Progressive Enhancement, from Litmus Live 2016, which you can watch below.

 

Background Image Support

Like everything in email design and development, background images have mixed support across email clients. Most clients support one of the techniques described above, the most notable exclusions being earlier versions of Android, some Gmail clients, and some of the webmail clients, which vary greatly depending on which browser is used.

Tweet this →

For clients that don’t support background images, you should always include either the bgcolor attribute or background-color property with a color that contrasts the HTML content on top of it to ensure that your message is always readable.

Even when background images are supported, a search through the Litmus Community reveals a few issues that plague designers. From weird hacks for Windows 10 Mail to figuring out how to use retina images, background images are not without their issues.

Test Your Background Images Today

Background images are a wildly useful way to spice up your email design and improve the accessibility of your campaigns but they’re not without their problems. Test your background images with Litmus Builder and Email Previews by signing up for a free Litmus trial today.

Start testing →

The post The Ultimate Guide to Background Images in Email appeared first on Litmus Software, Inc..