A Guide to HTML Background Images in Email | Email on Acid

---

Background shade and also pictures can truly include in the look of an e-mail. Here, we’ll go through whatever you require to obtain HTML history pictures to operate in all the customers that sustain them, along with the various means to consist of shade in your HTML e-mail.

Here’s a comprehensive list of email clients that sustain history pictures.

If you’d like to leap in advance, don’t allow us quit you:

Email Client Background Image Support

Adding history pictures can trigger some migraines. All desktop computer variations of Outlook require vector markup language (VML) to show the photo properly, as they utilize the Microsoft Word providing engine.

Windows 10 likewise has comparable peculiarities, however requires much more details than earlier Outlook variations, primarily the size and also elevation remaining in factor (pt) style as opposed to pixels.

Tip: to compute photo dimension making use of factors (pt) increase the pixel worth by 0.75. (e.g. 640 pixels x 0.75 = 480pt.)

WebKit e-mails and also the large bulk of modern-day e-mail customers can utilize the regular CSS or HTML history quality.

Justin Khoo over at FreshInbox uncovered an additional e-mail customer that, up until late in 2015, we didn’t understand sustained history pictures. Gmail application for non-Gmail accounts (GANGA) are the e-mail customers you see provided when you most likely to establish your e-mail on mobile.

These accounts currently sustain history pictures on both iphone and also Android, many thanks to an easy repair making use of the CSS history building, with the buildings worths embeded in shorthand.

What’s the distinction in between HTML and also CSS? HTML is the code that develops and also includes feature to an e-mail; CSS is the code that makes it visually pleasing.

The code listed below covers every circumstances where history pictures are currently sustained. We’re mosting likely to experience the listed below block item by item, however you can copy/paste this code right into your HTML and also just transform the material:

<table duty="discussion" size="640" design="size:640px;" cellpadding="0" cellspacing="0" boundary="0" straighten="facility">
<tr>
<td align="facility" bgcolor="#000000" history="https://via.placeholder.com/640x400" size="640" elevation="400" valign="leading" design="history: link('https://via.placeholder.com/640x400') facility / 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-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-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-repeat: repeat-y;

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

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.

background-position: top center;

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

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!