The Ultimate Guide to Background Images in Email

[ 0 By

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.

background images in email

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.

background images - save the date
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:

Bose’s background is simple but effective, and shows off their product.

background images - sunglasses
Source: Really Good Emails

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

background images in email - soapbox
Source: Really Good Emails

Our own emails make use of bold background images.

Litmus 2016 - year in review
Source: Really Good Emails

A beautiful, full-width background image from Penguin Classics.

Source: Really Good Emails

National Geographic uses gorgeous photography to bring their message, “Planet or Plastic?”, home.

National Geographic Planet or Plastic Email
Source: Really Good Emails

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

Source: Really Good Emails

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.

Source: Really Good Emails

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

Source: Heidi Olsen

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.

Gradients in particular have grown in popularity. A good example of using gradients in a background image can be found in this email from Shutterstock. (Bonus, it’s also animated.)

View the gradient animation in action

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.

Source: Really Good Emails

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.

Source: Kristian Robinson

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.

Do your images take too long to load?

Test your images for file-size and load time with Litmus Checklist. Plus, instantly see how your campaigns look in all popular email clients and mobile devices.

Learn more →


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 an 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 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=""></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('');"></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 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(''); 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(''); 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(''); 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(''); 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('') 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 the body of 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:

          .bgImage { 
              background-image: url('');
	  background-repeat: no-repeat;
	  background-position: top center;
              background-size: cover;

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%">
    <td background="" 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="" color="#7bceeb" />
        <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
      <!--[if gte mso 9]>

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

5. Want to go a step further? Add Interactivity

Swapping background images on hover is actually one of the better-supported progressive enhancements that can add interactivity to your email. Here’s a list of where it’s supported:

  • Gmail
  • iOS Mail (Apple Mail, iPad, iPhone)
  • Gmail App
  • Samsung Mail
  • AOL
  • Yahoo

You can use this technique anywhere you’d want to bring attention to a clickable section of your email, like in the module below:

Just choose your favorite background image technique from above, apply a .bgimage class to the same container as your background image, and include the below CSS in your header styles:

.bgimage {
     transition: 0.5s;
.bgimage:hover {
     transition: 0.5s;
	background-image: url('')!important;

The second background image is being called in the header embedded CSS at the moment that the module is hovered. Without a pre-loader, this means that this image will only start loading on hover which will cause a slight lag, like this:

The way to get around this is to start loading the second background image in the body of the email inside of a hidden DIV just above the module you’ll be applying the hover effect to, so that it loads first. Like below:


<!--[[if !mso]> <! -->

<div style="display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;">
  <img src="" height="1" width="1" border="0" alt=""/>




For more simple hover effects that you can use in your email, check out our post on 6 Interactive Elements You Can Add to Your Emails Today.

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.

Receive more hands-on advice when you join Litmus Live

Be the first to hear about speaker, ticket, and agenda updates for Litmus Live when you sign up to receive email updates.

Sign me up →


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.

Background image support in desktop email clients

Email Client Attribute Inline CSS Embedded CSS Bulletproof Background
Apple Mail yes yes yes yes
IBM Notes yes no no yes
Outlook 2000-2003 yes yes yes yes
Outlook 2007-2016 no no no yes
Outlook for Mac yes yes yes yes

Background image support in mobile email clients

Email Client Attribute Inline CSS Embedded CSS Bulletproof Background
Android 4.4 no no no no
Samsung Mail yes yes yes yes
Gmail Android yes yes yes yes
Gmail IMAP no no no no
Gmail Inbox Android yes yes yes yes
Outlook Android no no yes no
iOS Mail yes yes yes yes
Gmail iOS yes yes yes yes
Gmail Inbox iOS yes yes yes yes
Outlook iOS yes yes yes yes

Background image support in webmail clients

Email Client Attribute Inline CSS Embedded CSS Bulletproof Background
AOL Chrome yes yes yes yes
AOL Explorer yes no yes yes
AOL Firefox yes yes yes yes
Yahoo! Mail Chrome no yes yes yes
Yahoo! Mail Explorer no yes no yes
Yahoo! Mail Firefox no yes no no
Gmail Chrome no yes no no
Gmail Explorer no yes no no
Gmail Firefox no yes no yes
GSuite Chrome no no no no
GSuite Explorer no no no no
GSuite Firefox no no no yes
Inbox Chrome no no no no
Inbox Firefox yes no yes yes
Comcast Chrome yes yes no no
Comcast Explorer yes yes yes yes
Comcast Firefox yes yes no no no no no no
Libero no no no no Chrome no no yes yes Explorer no no no yes
Office 365 Chrome yes no no no
Office 365 Explorer no no no no yes yes yes yes
Outlook.‌com Chrome yes yes yes yes
Outlook.‌com Explorer no yes yes yes
Outlook.‌com Firefox no yes no yes Chrome yes no no yes Explorer no no no no Firefox yes no no yes Chrome no no no yes Explorer no no no no

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 →