Background Images in Modern HTML Emails
This article uncovers the approaches how background images can be set in email HTML. Various email clients support distinct CSS properties and HTML attributes, which makes a big difference in the way your content shows up. In each section of this post, we apply different background-related properties to different HTML element types. We detail background images on div, table and td, and inspect the appropriate technique to use for email body background images.
I am very grateful to Gergely Mécs, co-founder (and official Grand Dark Mage of HTML Emails) @ EDMdesigner for all the help he provided in the preparation of this article.
After reading this tutorial you will have firm knowledge on bulletproof background images. I encourage you to follow along with each step on Github and Litmus previews — the link references are enclosed at the end of each section.
You are reading the 8th chapter of the Modern HTML Email Tutorial series. In these articles we present important topics about email HTML coding in a step by step manner. If you wish to receive the next post delivered to your inbox, subscribe below!
Backround Image Used In a Container Element
In the following subsections, we cover div, table and td elements as the container for the background image. These are the default HTML elements for defining background image.
Background Images Applied on DIVs
The first case we need to examine is when a div element holds the background image. The example in this step looks like this:
We use a 217x217 pixel square image:
It is masked by the container, which is set to a given height and width. The black borders around the containers help to visually identify the differences.
Here is the code of this step, so you can see exactly what is going on (without the CSS resets):
<html>
### CSS Resets ###
.bgimage {
width:100%;
height:50px;
background:url(https://edmdesigner.github.io/modern-html-email-tutorial/lesson08/img/pattern.jpg) 0 0 repeat-x;
/* just for visibility */
border:1px solid black;
}
.bgimage2 {
width:100%;
height:50px;
background-image:url(https://edmdesigner.github.io/modern-html-email-tutorial/lesson08/img/pattern.jpg);
/* just for visibility */
border:1px solid black;
}
@media all and (max-width: 599px) {
.container600 {
width: 100%;
}
}
</style>
</head>
<body style="background-color:#F4F4F4;">
<table width="100%" cellpadding="0" cellspacing="0" style="min-width:100%;">
<tr>
<td width="100%" style="min-width:100%;background-color:#F4F4F4;padding:10px;">
<center>
<table class="container600" cellpadding="0" cellspacing="0" width="600" style="margin:0 auto;">
<tr>
<td width="100%" style="text-align:left;">
<table width="100%" cellpadding="0" cellspacing="0" style="min-width:100%;">
<tr>
<td width="100%" style="min-width:100%;background-color:#FFFFFF;color:#000000;padding:30px;">
<img alt="" src="https://edmdesigner.github.io/modern-html-email-tutorial/lesson08/img/logo.png" width="210" style="display: block;" />
</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" style="min-width:100%;">
<tr>
<td width="100%" style="min-width:100%;background-color:#F8F7F0;color:#58585A;padding:30px;">
<h1 style="font-family:Arial;font-size:36px;line-height:44px;padding-top:10px;padding-bottom:10px">Background images tutorial</h1>
<p>In this initial step, we test a few different combinations of common html tags and styling approaches. The black border around each background container will help us to find the differences.</p>
<h2>Div background based on .bgimage {...}</h2>
<div class="bgimage">
<p style="font-size: 16px;line-height: 20px; font-family: Georgia, Arial, sans-serif;">div.bgimage</div>
<h2>Div background-image based on .bgimage2 {...}</h2>
<div class="bgimage2">
<p style="font-size: 16px;line-height: 20px; font-family: Georgia, Arial, sans-serif;">div.bgimage2</div>
<h2>Div background with inline style - repeat-all</h2>
<div style="width:100%;height:50px;background:url(https://edmdesigner.github.io/modern-html-email-tutorial/lesson08/img/pattern.jpg) 0 0 repeat-x;border:1px solid black;">
<p style="font-size: 16px;line-height: 20px; font-family: Georgia, Arial, sans-serif;">div style="background:....0 0 repeat-all"</p>
</div>
<h2>Div background with inline style - no-repeat</h2>
<div style="width:100%;height:50px;background:url(https://edmdesigner.github.io/modern-html-email-tutorial/lesson08/img/pattern.jpg) center center no-repeat;border:1px solid black;">
<p style="font-size: 16px;line-height: 20px; font-family: Georgia, Arial, sans-serif;">div style="background:...center center no-repeat"</p>
</div>
<h2>Div background-image with inline style</h2>
<div style="width:100%;height:50px;background-image:url(https://edmdesigner.github.io/modern-html-email-tutorial/lesson08/img/pattern.jpg);border:1px solid black;">
<p style="font-size: 16px;line-height: 20px; font-family: Georgia, Arial, sans-serif;">div style="background-image:.."</p>
</div>
</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" style="min-width:100%;">
<tr>
<td width="100%" style="min-width:100%;background-color:#58585A;color:#FFFFFF;padding:30px;">
<p style="font-size:16px;line-height:20px;font-family:Georgia,Arial,sans-serif;text-align:center;">2017 @ COPYRIGHT - EDMDESIGNER</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>
In our tests we vary the following things:
- Property is applied by - CSS class / inline style / HTML attribute,
- Background image is defined by -
backgroundshorthand /background-imageproperty, - The different values of the background-repeat property - repeat-all / no-repeat / repeat-x / repeat-y
- The two suitable use of background-position property in our case - top, left / center, center.
In the example code, these options are all tried. Different property combinations can result in exactly the same view, because of the rendering engine’s default settings. By default, the engines apply background-repeat: repeat;, and background-position: top left; (which is equal to background-position: 0 0;). Nevertheless, it is not a general rule, that the same view means the same properties applied.
So, we created 5 test cases. One test passes, when the background image shows up.
The following email clients fail on this test:
- Office 365 and Outlook.com webmails do not apply background images on
divat all, - Desktop Word-based Outlooks, Lotus Notes versions and Windows 10 Mail do not support background images.
An example of failure in Outlook 2013:
There is partial support in some email clients:
- Across webmails Terra Mail and Mail.ru are not able to use classes, so the first two tests fail,
- On Androids (except Android 4.4) no background shows up (more on this below).
So, as noted above, the preview for Android 6.0 suggests that background image is not supported. The same applies for other Android devices, except Android 4.4. This seemed unrealistic. I suspected that on devices with newer Android versions background images are supported. So I sent the test's email HTML to my own device and got this proof supporting my theory (my phone runs on Android 6.0):
We suspect, that some updates were not pushed on Litmus and Email on Acid to some Android test environments. We tested our example with both of these services, and the properties we use are expected to work on up-to-date Android devices. Just see the previous image!
Full support is available for background image on:
- Apple devices,
divs are applied no matter if it is a desktop or a mobile client, - IE-based Outlooks and Thunderbird,
- all other webmail clients not listed above.
You can check out the full source code of this step on Github.
Litmus test results
Background Images on Tables and Table Cells
In this section, we apply background image either on a table element or a table cell. If the image shows up, then our test passes.
You can review how each method performs in the test — I am only listing the important differences compared to the previous example.
By applying background images on tables, we can support most versions of Lotus Notes. Lotus Notes 8 displays every method well, while newer Notes clients only serve the background image when we define it as an HTML attribute.
Lotus Notes 8 preview:
Lotus Notes 8.5 preview:
Other desktop email clients are not affected.
In the case of webmails, Outlook.com and Office 365 can also display background image, when it is defined in the table as an HTML attribute.
We can conclude, that in email coding, it is generally advised to use properties that have been around for a long time. The older the HTML or CSS rule is, the more likely it is to work on a widespread client base. Actually, this was my thought while experimenting with the line-height based bulletproof button for my previous article. Line-height was defined in CSS Level 1, and has basic support from as early as Internet Explorer 4.0!
With this guideline in mind, it is no surprise that the background attribute on a table has the greatest support. The background attribute is one of the key attributes of the body element as defined in HTML 3.2 specification. As the children of the body element, the table inherits the background attribute, so it is supported in the table also very well.
Based on the visual test results, mobile client support is unchanged.
You can check out the full source code of this step on Github.
You can also review the influence of this step on Litmus
The Most Supported Background Image Method
I am sure you have seen this technique before; at least, you could have seen it in our last article, that I mentioned previously. VML is basically present in email HTML just to patch Word-based Outlook versions, where images are not rendered. This is useful (in fact, the only way) to have background images in every Outlook version.
This is what we try now in the test for the background image:
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="width:100%;min-height:50px;height:50px;border:1px solid black;" background="https://edmdesigner.github.io/modern-html-email-tutorial/lesson08/img/pattern.jpg">
<tr><td style="font-size: 16px;line-height: 20px; font-family: Georgia, Arial, sans-serif;">
<!--[if gte mso 9]>
<v:rect style="width:540px;height:50px;" strokecolor="none">
<v:fill type="tile" color="#363636" src="https://edmdesigner.github.io/modern-html-email-tutorial/lesson08/img/pattern.jpg" /></v:fill>
</v:rect>
<v:shape id="NameHere" style="position:absolute;width:540px;height:50px;">
<![endif]-->
<p>table background="...." + vml fixed width background</p>
<!--[if gte mso 9]>
</v:shape>
<![endif]-->
</td></tr>
</table>
As you recall, besides misleading tests on Androids, we only lacked support for Word-based Outlooks and Windows 10 Mail. With VML we can provide stable background image on Word-based Outlook clients as well.
Indeed, it makes Word-based Outlooks display nicely:
Somehow our basic VML code (or even Stig's magic button) does not make the image to show up in Windows 10 Mail.
We found an interesting fix in Litmus community discussions, but it is still not working properly. This topic is under investigation. We want to implement support for Windows 10 Mail in the new version of the HTML generator for our editors. I am going to update this article when a stable solution is available.
You can check out the full source code of this step on Github.
Litmus test results
Background Images in the Email Body
Tired of coding? Try our new email editor, Chamaileon. Everything written here could be achieved with Chamaileon without coding.
In this section, we try 3 different methods to define background image in the email body. They are shown in 3 subsections. In each subsection you can see how the code changes, and examine the previews. Based on these three subsections, we build a final example that uses the best practices for these subsections.
You can examine client support in the README.md file of each step. They are provided at the end of the subsections, linking to the tutorial's Github repository.
The final example we go for is this:
Background Images Applied by Background Attribute
First, we try the background image as an HTML attribute.
The code for this step:
<body background="https://edmdesigner.github.io/modern-html-email-tutorial/lesson08/img/pattern.jpg" bgcolor="#F4F4F4">
<table width="100%" cellpadding="0" cellspacing="0" style="min-width:100%;">
<tr>
<td width="100%" style="min-width:100%;padding:10px;">
<center>
<table class="container600" cellpadding="0" cellspacing="0" width="600" style="margin:0 auto;">
<tr>
<td width="100%" style="text-align:left;">
<table width="100%" cellpadding="0" cellspacing="0" style="min-width:100%;">
<tr>
<td width="100%" style="min-width:100%;background-color:#FFFFFF;color:#000000;padding:30px;">
<img alt="" src="https://edmdesigner.github.io/modern-html-email-tutorial/lesson08/img/logo.png" width="210" style="display: block;" />
</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" style="min-width:100%;">
<tr>
<td width="100%" style="min-width:100%;background-color:#F8F7F0;color:#58585A;padding:30px;">
<h1 style="font-family:Arial;font-size:36px;line-height:44px;padding-top:10px;padding-bottom:10px">Background images tutorial - step03</h1>
<p>In this step, we declare "background" attribute as background image definition in the BODY tag.</p>
</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" style="min-width:100%;">
<tr>
<td width="100%" style="min-width:100%;background-color:#58585A;color:#FFFFFF;padding:30px;">
<p style="font-size:16px;line-height:20px;font-family:Georgia,Arial,sans-serif;text-align:center;">2017 @ COPYRIGHT - EDMDESIGNER</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>
In these tests only the body and the first opening table tags are important. We do not change anything else in the examples. So, in the following two subsections, I show only the necessary parts.
Background attribute works on Word-based Outlooks:
But fails on most webmails, like AOL Mail:
The use of the background attribute alone is not supported by most webmail clients.
You can check out the full source code of this step on Github.
Litmus test results
Background Images Applied by Individual Background-Related Properties
Next, we use the background image with individual background values:
<body style="background-color:#F4F4F4;background-image: url(https://edmdesigner.github.io/modern-html-email-tutorial/lesson08/img/pattern.jpg); background-position: center top; background-repeat: repeat;">
<table width="100%" cellpadding="0" cellspacing="0" style="min-width:100%;">
<tr>
### THE CODE OF THE EMAIL ###
</tr>
</table>
</body>
It works now on most webmails, like the G Suite:
But fails on some other webmails, like Outlook.com:
We also lose Lotus Notes support:
The use of individual background properties is not supported by Lotus Notes and some webmail clients.
You can check out the full source code of this step on Github.
Litmus test results
Background Images Applied by Background Shorthand Property
Last but not least, we can use the background shorthand property, by which we queue the background-related values one after another:
<body style="background: #F4F4F4 url(https://edmdesigner.github.io/modern-html-email-tutorial/lesson08/img/pattern.jpg) center top repeat;">
<table width="100%" cellpadding="0" cellspacing="0" style="min-width:100%;">
<tr>
### THE CODE OF THE EMAIL ###
</tr>
</table>
</body>
This method has exactly the same results as the one with Individual Background Properties.
The use of individual background properties is not supported by Lotus Notes and some webmail clients. The results are identical to the previous subsection's. Therefore we know, that it does not make a difference if we use the shorthand or the individual properties to set the background image.
You can check out the full source code of this step on Github.
Litmus test results
The Ultimate Solution for Background Images in the Email Body
The table below shows only the email clients that we could not support in the previous steps. We definitely want to fix this!
If we take a close look at the table, it is clear that we can not support all email clients with the previous methods. The intuitive approach is to use the mixture of the background attribute and the inline styles. But even with that, we can not support some webmail clients like Outlook.com, Yahoo! Mail. These are the clients which are shared in the two columns' listings.
So, what else can we do? I'll let you in on a secret: we have seen the solution already.
We recognized the widespread support for the table element with background attribute. Now, the idea is to have a wrapper table on which we also set the background attribute. As this kind of setup worked on all web based email clients in the first step, we expect it to work in this case as well.
We also apply the mixture of the background attribute and the inline styles in the body element. It is necessary because only that was supported by Word-based Outlooks. The attribute in the table method was not.
We use this code:
<html>
<head>
### CSS Resets ###
</head>
<body background="https://edmdesigner.github.io/modern-html-email-tutorial/lesson08/img/pattern.jpg" bgcolor="#F4F4F4" style="background-color:#F4F4F4;background-image: url(https://edmdesigner.github.io/modern-html-email-tutorial/lesson08/img/pattern.jpg); background-position: center top;">
<table width="100%" cellpadding="0" cellspacing="0" background="https://edmdesigner.github.io/modern-html-email-tutorial/lesson08/img/pattern.jpg" style="min-width:100%;background-position: center top; background-repeat: repeat;">
<tr>
<td width="100%" style="min-width:100%;padding:10px;">
<center>
<table class="container600" cellpadding="0" cellspacing="0" width="600" style="margin:0 auto;">
<tr>
<td width="100%" style="text-align:left;">
<table width="100%" cellpadding="0" cellspacing="0" style="min-width:100%;">
<tr>
<td width="100%" style="min-width:100%;background-color:#FFFFFF;color:#000000;padding:30px;">
<img alt="" src="https://edmdesigner.github.io/modern-html-email-tutorial/lesson08/img/logo.png" width="210" style="display: block;" />
</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" style="min-width:100%;">
<tr>
<td width="100%" style="min-width:100%;background-color:#F8F7F0;color:#58585A;padding:30px;">
<h1 style="font-family:Arial;font-size:36px;line-height:44px;padding-top:10px;padding-bottom:10px">Background images tutorial - step06</h1>
<p>Now our BODY has background attribute and inline style with "background-image" property.</p>
<p>Also, we declare the body background on the bodyWrapper table, for webmails, learning the previous step's imperfect support.</p>
</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" style="min-width:100%;">
<tr>
<td width="100%" style="min-width:100%;background-color:#58585A;color:#FFFFFF;padding:30px;">
<p style="font-size:16px;line-height:20px;font-family:Georgia,Arial,sans-serif;text-align:center;">2017 @ COPYRIGHT - EDMDESIGNER</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>
</html>
With this fix, apart from the previously mentioned exceptions, every client is able to display the background image. So, only Windows 10 Mail and Lotus Notes 7 are the email clients we can actually not support.
You can check out the full source code of this step on Github.
Litmus test results
The Background Image Pattern in the Body
We are thinking in components and patterns from the beginning of this tutorial series. We started to build general email components, as the series started to focus on email development.
So, we want to generalize our discoveries into a background image pattern.
For the body element, it looks like this:
<html>
<head>
### META ###
### CSS ###
</head>
<body background="### SRC ###" bgcolor="### BGCOLOR" style="background-color:# ### BACKGROUND-COLOR ###; background-image: url(### IMAGE URL ###); background-position: center top;">
<table width="100%" cellpadding="0" cellspacing="0" background="### SRC ###" style="min-width:100%; background-position: center top; background-repeat: repeat;">
<tr>
<td>
### CENTERED CONTAINER COMPONENT ###
### CONTENT ###
</td>
</tr>
</table>
</body>
</html>
Inside this pattern you can place your standard 600px wide centered container component, or you can try some wider centered containers.
This pattern may be reused in every email you develop from now on.
You can also complete the previous components we discussed in previous tutorials, so they can apply background images.
You can check out the full source code of this step on Github.
Litmus test results
Summary
This tutorial examined the ins and outs of background images in email HTML. We achieved great support for background images in container elements and in the email body.
We experienced that when we use edited image for background as a part of the email content, the following rules apply: the container must be a table, and the background image must be defined by the background attribute. It was also crucial to add VML, to support Word-based Outlook desktop clients.
We saw that we must set the background attribute in the body and table elements, and we must also define the background image as an inline style in the body. Furthermore, we identified the background image pattern for the email body.
Now you can insert background images in container elements and add them to the email body with confidence. Your background image is bulletproof.
If you feel drained after by this extensive knowledge sharing, you may wish to see some live examples of what you have just learnt. You can look for inspiration in this post, which was written as part of Email Design Basics article series on Chamaileon’s blog about email marketing.
Do you have any other tricks up your sleeve related to email background images? Don't hesitate to share them below, in the comments section. We are especially interested in your thoughts on achieving VML support in Windows 10 Mail.
Our next post will be about email typography. Stay tuned!