Article first published in December 2010, updated April 2019
Adding background images to your email? There are a lot of options, thanks to Stig‘s “Bulletproof Email Background Images” code generator at emailbg.net.
A few months ago, we covered a couple of methods for applying background images to HTML emails, courtesy of code guru and forum celebrity, Brian Thies. Since then, he’s refined the code required to reliably get background images to display in Outlook ’07, Gmail, and other finicky email clients, so we thought it was time to publish an update.
Applying a background image to the body of an HTML email
This approach comes in two parts. First, we’re going to use a table of width=”100%” to ensure that background images display in clients like Gmail. Then, using Brian Thies’ updated approach, we’re going to apply Microsoft VML to force images to display in Outlook ’07 & ’10. Here’s the code in two steps, beginning with the Microsoft-specific HTML namespace declaration:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
The table attribute approach to background images
<!-- [if gte mso 9]>
<v:background fill="t">
<v:fill type="tile" src="https://www.example.com/background_image.jpg" />
</v:background>
<![endif]-->
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center">
<table border="0" width="600" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>If you can see this over the image, background images are successful.</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Note that VML images need to be hosted by a 3rd party. You will need to provide a background image (i.e., replace “https://www.example.com/background_image.jpg”) for this to work. An alternate CSS approach and tips for providing fallback colors can be found in our earlier blog post.
Applying a background image to a table cell
In an earlier post, we specified a method for setting a background image to cells. While it did the trick, it didn’t allow for background images to be tiled and it used a lot of CSS to achieve a seemingly simple result. To overcome this, we swapped out the original VML image class for rect and fill for the same result, with less code.
For a repeating background image in a table cell:
- Use the Microsoft HTML namespace declaration featured earlier in this post
- Adapt the following VML code sample:
<table border="0" width="600" cellspacing="0" cellpadding="0">
<tbody>
<tr><!-- Backup background color is #DDDDDD -->
<td style="background-image: url('https://www.example.com/background_image.jpg');" valign="top" bgcolor="#DDDDDD" width="600" height="120"><!-- [if gte mso 9]>
<v:rect style="width:600px;height:120px;" strokecolor="none">
<v:fill type="tile" color="#DDDDDD" src="https://www.example.com/background_image.jpg" /></v:fill>
</v:rect>
<v:shape id="theText" style="position:absolute;width:600px;height:120px;">
<![endif]-->If you can see this over the image, background images are successful.<!-- [if gte mso 9]>
</v:shape>
<![endif]--></td>
</tr>
</tbody>
</table>
Note that height and width dimensions in the VML have to be the same as the height and width of the table cell. To prevent the image from repeating, you can either match the background image dimensions to cell width and height, or replace <v:fill type="tile" with <v:fill type="frame" to resize the image to the dimensions defined in <v:rect>.
Many thanks again to Brian for tirelessly sharing his know-how with coders and designers everywhere.
Note that height and width dimensions in the VML have to be the same as the height and width of the table cell. To prevent the image from repeating, you can either match the background image dimensions to cell width and height or replace <v:fill type=”tile” with <v:fill type=”frame” to resize the image to the dimensions defined in <v:rect>.
Many thanks again to Brian, for tirelessly sharing his know-how with coders and designers everywhere.
Should you add a background image to your emails?
In this digital age, it’s becoming increasingly important to stand out from the crowd. Consumers have constant access to the internet, and they have so many choices for just about everything.
Can you use background images in HTML emails?
With emails, in particular, the competition seems to be even tighter. According to Statista, the projected number of emails that will be sent and received per day in 2019 is over 293 billion. That’s emails from friends, family, work, subscriptions, and promotions. How can your email stand out from the rest?
One way to achieve this is through email background images. Some of the most notable advantages to incorporating background images into your emails are:
1. You can place HTML content on your background images
Since background images are visually subtle and not the “hero image,” you can place additional content such as images, plugins, and text on the images. This can allow all your content to be in one space.
2. The content in the background image is always accessible
Many users are accessing their emails through mobile devices. This has encouraged the use of responsive email designs that can adapt to desktops and mobiles. The problem that often emerges is that email clients sometimes won’t automatically display your images until the recipient manually selects for the images to be displayed.
This means that some of your valuable content may be lost and won’t be seen by your recipient. Embedding plugins and text on background images is a great way to have a visually stimulating email design and, if the image is not recognized by the email client or fails to upload, the necessary plugins and text will still be in the image.
So the answer to whether or not you can add background images to your emails is simple: yes. However, incorporating them does come with its challenges.
Do Gmail and other email clients support background images?
Some HTML email background images aren’t supported. While all the webmail clients support it, desktop and mobile is a bit of a “mixed” situation. Please see our chart.
It is worth noting that, for the clients that do not support background images, you should include the background color property or bgcolor attribute with a contrasting color to the HTML content, as this will help your message to be readable.
Will the background image be flagged as spam?
A lot of spam was once able to make it into our inboxes through images. Spammers realized that the spam filters were concentrating on spam in text, so they began embedding spam in images.
Recent spam filters have been able to detect spam that has been embedded in images. Once it’s detected, it gets automatically sent to our spam box for us to decide what we’d like to do with it. Unfortunately, as we highlighted earlier through our chart, background images aren’t supported on some email clients and, if the client decides that the image is “suspicious,” it will be flagged as spam.
Wrap up
Background images are a creative way to deliver memorable messages to your email list. However, as noted above, they do come with their challenges. One of our recommendations is for you to pick a color similar to your background image as a fallback for email clients that don’t support background images.
We’d also like to stress the importance of testing your background images across different email clients to ensure that your email can be displayed as you would like it to for most (if not all) of your recipients.
Check out our bulletproof background images that you can use in your HTML email.