HTML backgrounds and color codes in email

HTML Background Images in Email: A Cheat Sheet

17

Background color and images can really add to the look and feel of an email. Here, we’ll run through everything you need to get HTML background images to work in all the clients that support them, as well as the different ways to include color in your HTML email.

Here’s a comprehensive list of email clients that support background images.

If you’d like to jump ahead, don’t let us stop you:

Email Client Background Image Support

Adding background images can cause some headaches. All desktop versions of Outlook need vector markup language (VML) to display the image correctly, as they use the Microsoft Word rendering engine.

Windows 10 also has similar quirks, but needs even more information than earlier Outlook versions, mainly the width and height being in point (pt) format instead of pixels.

Tip: to calculate image size using points (pt) multiply the pixel value by 0.75. (e.g. 640 pixels x 0.75 = 480pt.)

WebKit emails and the vast majority of modern email clients can use the normal CSS or HTML background attribute.

Justin Khoo over at FreshInbox discovered another email client that, until late last year, we didn’t know supported background images. Gmail app for non-Gmail accounts (GANGA) are the email clients you see listed when you go to set up your email on mobile.

These accounts now support background images on both iOS and Android, thanks to a simple fix using the CSS background property, with the properties values set in shorthand.

What’s the difference between HTML and CSS? HTML is the code that creates and adds function to an email; CSS is the code that makes it aesthetically pleasing.

The code below covers every instance where background images are now supported. We’re going to go through the below block piece by piece, but you can copy/paste this code into your HTML and simply change the content:

<table role="presentation" width="640" style="width:640px;" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td align="center" bgcolor="#000000" background="https://via.placeholder.com/640x400" width="640" height="400" valign="top" style="background: url('https://via.placeholder.com/640x400') center / cover no-repeat #000000;">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width: 480pt; height: 300pt;" src="https://via.placeholder.com/640x400" />                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block;position: absolute; width: 480pt; height:300pt;">
<v:fill  opacity="0%" color="#000000”  />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<div style="font-size: 0;">
<table role="presentation" width="640" style="width:640px;" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td height="400" align="center">CONTENT</td>
</tr>
</table>
</div>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:fill>
</v:rect>
</v:image>
<![endif]-->
</td>
</tr>
</table>

Let’s Break It Down

HTML becomes much more approachable when you know what everything means.

Setting up your tables

In HTML, tables are the structure of data as columns and rows. Within each <table>, you have the parent element, a table row (<tr>), and child element(s), table data (<td>).

Starting with a table and table row (<tr>), you can include the appropriate code to ensure the email works in all versions of Outlook:

<table role="presentation" width="640" style="width:640px;" cellpadding="0" cellspacing="0" border="0" align="center">
  <tr>

Using table data

Table data is the “cell” that contains the data, or contents, of its parent table row (<tr>) and dictates how it should function.

The table data (<td>) below is jam-packed with fixes to ensure everything will display as it should.

In this case, it’s center-aligned and we’ve declared the background color (bgcolor) in HTML as a fallback, as well as the background color behind any .png images, like so:

<td align="center" bgcolor="#000000"

Adding attributes

Attributes are words placed inside an element’s opening tags (ex: <td>) that give additional details on the behavior of that element.

Using the line of code above as an example, alignment (<td align=) and background color (bgcolor=) are attributes of the table data open tag (<td). The direction in quotes, "center" and "#000000", control the behavior.

Moving on, you can populate the HTML background= property with a link to the image you’d like to use.

background="https://via.placeholder.com/640x400" 

You can then define the HTML width, height and vertical alignment (valign) of the table data. Vertical alignment can either be top, bottom, middle or baseline. For this example, we’re going with "top":

width="640" height="400" valign="top" 

Finally, you can populate the inline style= property with shorthand background CSS and its values, below.

Shorthand background CSS allows you to set the current background style property values (color, image, repeat method, etc.) simultaneously with multiple others.

Remember, we said earlier that CSS is the visual side of code, so this is where it starts to get jazzed up.

style="background: url('https://via.placeholder.com/640x400') center / cover no-repeat #000000;"

Above, the background: url(‘image.png’) field references the image you’d like to use. You can then specify the image position, center/cover, the repeat method for the image (in this case, no-repeat) and finally the background color, #000000;.

You set these in order to centralize the background image so that it’s big enough to cover the content without needing to repeat.

AOL and Yahoo Mail support for the cover attribute can be a bit buggy, stripping out the slash between center / coverr. See Nathan Keen’s comment with a suggestion for fixing this. He says writing it out longhand prevents the code erroring out in Yahoo and AOL.

background-image: url(‘https://via.placeholder.com/600×255’);background-repeat: no-repeat;background-position: center;background-size: cover;background-color:#27313D;

Unfortunately, AOL and Yahoo! do not respect the shorthand cover attribute. Therefore, the linked image must be the correct size to cover the area behind the content, otherwise if not, then the background-repeat: no-repeat; field has to be stated in full in order to prevent it from repeating.

Here’s what all of this code combined looks like so far:

<td align="center" bgcolor="#000000" background="https://via.placeholder.com/640x400" width="640" height="400" valign="top" style="background: url('https://via.placeholder.com/640x400') center / cover no-repeat #000000;">

Ready to break it down even further? We thought so.

Background Attributes: A Deep Dive

To reiterate, attributes are the words inside an element’s opening tags (ex: <background-size:>) that allow you to set parameters that tell the email client how to render your instructions when displaying the email.

BACKGROUND-SIZE: ATTRIBUTE

The background-size: attribute allows you to control the way your background image fills a space.

background-size: contain;

‘Contain’ tells the client to keep the background image to its original size and to fill the element it is within. Using the dimensions from the example above, the element it will fill is a 640px x 400px table.

When the background is made responsive or the containing element is changed going to a smaller screen, say on mobile, this may affect the way the image is displayed. Any space not covered by the background image will be filled by the background-color.

Background image with color

background-size: cover;

‘Cover’ ensures the image completely covers the element it’s in, even stretching an image beyond its dimensions, but nonetheless still keeping the image within the element.

Background image covers it's containing element

BACKGROUND-REPEAT: ATTRIBUTE

This attribute controls the repeat method of the background image.

background-repeat: no-repeat;

This ensures the image does not repeat. Any space that is not filled will be filled with the background-color.

background-repeat: repeat-x;

The background image will repeat horizontally along the x-axis until the parent element is filled.

Background image x-axis repeat

background-repeat: repeat-y;

The background image will repeat vertically along the y-axis until the parent element is filled.

Background image y-axis repeat

BACKGROUND-POSITION: ATTRIBUTE

This attribute allows you to position the background image within the space of the parent element. You can use a single position (center) or multiple (top center) to achieve perfect placement.

background-position: center;

Center will align the image in the center of the element it is filling.

Center alignment

background-position: top center;

Top center will position the image in the center at the top of the element it is filling.

Top and center alignment

Vector Markup Language

After the table data (<td>) details are in place, you can start on the vector markup language (VML).

Vector markup language isn’t its own coding language per se, like HTML or JavaScript. It works within the language of XML, and is used to incorporate 2D vector graphics (shapes) into email (or web) design that you can then fill with colors, content, whatever you want.

When setting up your email, if you are going to be using any Microsoft-specific comment or code along with VML, you need to ensure the correct HTML tag is included in the head of the document, as follows:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

Psst: you can copy/paste this too.

MSO statements

The opening and closing MSO statements in the code below ensure the VML is only applied to the versions of Outlook that require it.

The VML of the code below, <!--[if gte mso 9]> and <![endif]-->, tells us that the contained code will only take effect for, or target, versions of Microsoft Office (mso) greater than or equal to (gte) version 9, Outlook 2000.

You can define the XML namespace with xmlns:v="urn:schemas-microsoft-com:vml", then define the image and values of the v:image property.

<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width: 480pt; height: 300pt;" src="https://via.placeholder.com/640x400" />                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block;position: absolute; width: 480pt; height:300pt;">
<v:fill  opacity="0%" color="#000000"  />
<v:textbox inset="0,0,0,0">
<![endif]-->

Below, fill is used to define attributes if anything other than a solid color or image is in place.

fill=”true” tells the VML image to fill the entirety of the shape.

stroke is used to define if a line or border is in place. In the case of a background image, it isn’t, so this should be set to stroke=”false”.

<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width: 480pt; height: 300pt;" src="https://via.placeholder.com/640x400" />

Most importantly, the VML attributes are followed by a style tag containing the dimensions of the image as points.

Remember the formula from earlier: to calculate the dimensions as points, multiply the number of pixels by 0.75. (e.g. 640px x 0.75 = 480pt.)

VML images

Last but by no means least is the image src (your image’s URL).

Like we mentioned, VML is a way to bring shapes and vectors into your code to help backgrounds play nicely with Microsoft Office.

You can use the same image dimensions from v:image above, width: 480pt; height: 300pt;, to make a matching sized rectangle for the background image to sit. Simply use v:rect with similar attributes, below.

The main difference between v:image and v:rect is the position:absolute;, which places the rectangle exactly where it’s needed.

<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block;position: absolute; width: 480pt; height:300pt;">

VML colors

Next, you can use the VML v:fill to set the color and opacity of the rectangle (v:rect) and background image (v:image).

This color needs to be the same as the bgcolor and background: color; to ensure uniformity across all email clients.

<v:fill  opacity="0%" color="#000000"  />

Tip: You can create a color gradient using v:fill by adding a second color, e.g. <v:fill color=”#000000” color2="#ffea00" type="gradient" /> this can be as a fallback or in addition to a CSS gradient: background: linear-gradient(#000000, #f4f4f4);

Lastly, you can define the v:textbox positioning to show you’ll be layering additional content over the above rectangle (v:rect) and image (v:image). In this example, we defined the position starting from the top left at 0,0,0,0.

<v:textbox inset="0,0,0,0">

VML formatting

Now, we open the <div> containing the image and VML. Make sure to follow it with <div style="font-size: 0;"> to stop the automatic 20px gap that appears after the image in Outlook.

As the final HTML table tag we used was a <td>, we need to use correct syntax here and either fill the <td> or start a new <table> to add the content:

<table role="presentation" width="640" style="width:640px;" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td height="400" align="center">CONTENT</td>
</tr>
</table>

Input the closing tags for all of the above, including the VML tags, closing those within an MSO conditional tag.

The v:fill and v:image tags are self closing, therefore not needed after the table:

</div>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>

Responsive Background Images

The HTML background image currently is set to cover the 640 pixel width of the table, which itself is not responsive.

You can include a class to change the width of the table to 100% of the device width instead of specifying pixels or points.

To do so, add a class to the table and elements that need to be responsive (e.g. class=”width100pc”) and include the corresponding CSS to the head of the email. This can be done within a current media query or its own as shown here:

@media screen and (max-device-width:640px), screen and (max-width:640px) {
.w100pc {
width: 100%!important;
min-width: 100%!important;
max-width: 1000px!important;
height: auto!important;
}
}

To make the background image responsive and 100% width, we can use the vw measurement and set the image width: 100vw.

By setting a class=”bgmobile”, we can change how our background image behaves within the same media query. Most useful here is the use of background-image: url(), which you can then swap to an optimised mobile image for the background:

.bgmobile{
width: 100vw!important;
background-repeat: no-repeat!important;
background-size: cover!important;
background-image: url(mobile-image.png)!important;}

Background Color

To control the background color within an email, use the HTML element bgcolor or the CSS style attribute background-color:, here:

<td bgcolor=”#f4f4f4” style=”background-color: #f4f4f4;”> Content </td>

Last Minute !important Information

Whenever you are creating a design, test it and make sure it works without a background image. Although email clients support HTML background images, slow connection speeds on mobile, image blocking or weird edge cases can muck everything up!

Above, we defined the background color wherever possible. Make sure this contrasts with any text (including alt text) that you layer on top.

When testing your email with Email on Acid, make sure to tick the checkbox Test with Image Blocking to preview your email without any images, ensuring that the background color is correct, present and accessible.

And of course, there’s always more amazing resources across the #emailgeeks webspace!

Don’t guess, test

Email clients are constantly changing, which is why it’s important to test your email every time; what worked yesterday might not work today. Sinch Email on Acid offers unlimited email testing in major mailbox providers and the most popular devices. Test 100+ options as much as you want – there’s no limit. That means you can make sure your email looks good before it hits the inbox. Want to see for yourself? Take advantage of our free, seven-day trial.

Test Today

Author: Jay Oram

Jay Oram is part of the design and code solutions team at the email specialist agency, ActionRocket. In his role at ActionRocket, Jay is usually experimenting with new code for emails or finding that elusive rendering fix. See more articles from Jay at emaildesignreview.com or find him on Twitter at @emailjay_.

Author: Jay Oram

Jay Oram is part of the design and code solutions team at the email specialist agency, ActionRocket. In his role at ActionRocket, Jay is usually experimenting with new code for emails or finding that elusive rendering fix. See more articles from Jay at emaildesignreview.com or find him on Twitter at @emailjay_.

17 thoughts on “HTML Background Images in Email: A Cheat Sheet”

  1. The background image repeats in Outlook iOS. Any thoughts on how to address this? It seems to ignore the inline css. I tried targeting the with body[data-outlook-cycle] .style-name { background-repeat: no-repeat !important;} but that gets ignored as well.

  2. This has problems with the VML section:
    1. Why are you setting the opacity to 0%?
    2. Why are you closing an already-closed tag?

    1. Hey Dave, thanks for your questions. The opacity=”0%” is Jay’s (the author’s) way of coding a VML background color. Regarding the “closing of an already-closed tag”…Jay’s an experienced coder and he likes to experiment with various methods. This method let him achieve what he wanted to achieve. I hope this helps, but if you have more questions, let us know the context of the closing and already closed tag, and we’ll be happy to provide more info. Our coders love this kind of stuff!

  3. The main table inside the VML code, have you ever try to nest another table inside the main table. For example, adding a button. So the button is a table not at 100%, let’s say 300px wide. It’s inside a TD of the main table. Try aligning the Button to the right now, it doesn’t work, it will be aligned to the left in a few Outlook versions. But if in a TD of the main table you have text, now it’s ok! We never found the solution for that. Any ideas?

    Example:
    https://app.emailonacid.com/app/acidtest/WQh5WB8FRH2oieXUSBYyogUrmM3yJzYDxBywqJFFXYeot/list

    1. Hi Eric, we tried nesting another table inside another table to create a button inside the VLM code. We can see how it’s rendering different in Outlook desktop clients. Not sure why the CTA button just shifts to the left like that, but maybe try rebuilding it and go from there. Let us know if that works!

      1. Hello,
        Do you have any update on this subject ?
        nesting the VML code for the button is working with proper div but the button shift to the top-left corner…
        Only way to align with the text in the button seems to be margins.

        1. Hey Pierre, running into the same issue, any table inside this code will convert it to 100% for some reason. i cant seem to be able to put two 250px tables side by side inside this code, Outlook converts them to 100%. if anybody has a solution please let me know – ccastillo@gopro.com

  4. Hi Jay
    Thanks for your solutions. It works good in Outlook 2019 (Windows 10). In Outlook 2016 (Windows 10) I have a problem with height more than 1290pt. I need height of 2250pt. Do you have any idea? Thank you for your support!

  5. Thanks for this very informative post Jay. It’s great how you explain what all of the different elements are and what they do, not just “copy and paste this”

    We are having a problem when people how use Outlook forward emails that have a background: it removes the background and adds an .emz attachment (that frequently causes “dangerous attachment” error in mail scanners) Has anyone else come across this and, more importantly, found a way to deal with it?
    Even just removing the background and not attaching an emz file would be OK.

  6. Regarding Yahoo/AOL not respecting “cover”, I found that what Yahoo/AOL are doing (and it might have changed since you wrote this) is removing the slash. I.e. “center / cover” becomes “center cover”, which makes that line of code error out. But writing it out long-hand works, i.e. `background-image: url(‘https://via.placeholder.com/600×255’);background-repeat: no-repeat;background-position: center;background-size: cover;background-color:#27313D;`

    1. Thanks, Nathan. It’s quite likely things have changed as you said. Appreciate your advice and clarification!

  7. Hello guys, is it possible to achieve the same behaviour of the image like center/ cover using vml on outlook?
    I have dynamically generated images of different dimensions and I need to display them undistorted inside a container with fixed size and outlook is used by most of our audience.
    Thanks

  8. This is a great article, thanks. I never realised this was so tricky.
    Several points to note:
    1) The fourth quote in the line starting <v:fill is not a proper quote
    2) The line prevents the CONTENT displaying in the latest gmail client
    3) If the picture cannot be loaded the content is black on black in gmail client
    4) The CONTENT is in a table with a role set to “presentation”, which will mean screen readers will ignore it.

Leave a Reply

Your email address will not be published. Required fields are marked *