Skip to main content
Act-On Software

Setting an Image as the Background for a Custom Email Layout

AUDIENCE: Web Developers, IT Team
OBJECTIVES: Setting an image as the background for your custom email layout
 

Setting an image as the background for your custom email layout can be a frustrating process sometimes, due primarily to the large variation in acceptable HTML/CSS between popular email clients. In particular, Microsoft Outlook for Windows can be challenging to work with due to Microsoft's decision to use the Word HTML rendering engine in Outlook 2007 and newer versions -- this HTML rendering engine has dramatically reduced functionality as compared to modern web browsers or even other email cli

Overall, it is recommended that if you set a background image for your email message, you should design your layout in a way in that it will still look attractive if the background image is not shown. For example, if your background is a grey textured and tiled graphic, be sure so also set a background color of grey as a fallback.

If you have not worked with Act-On stationery, see the article Create Stationeries.

Outlook renders HTML differently due to the Word HTML rendering engine in Outlook 2007 and newer. Customers often have difficulty displaying background images either in the full body of the Email or in a single table cell. The following instructions will provide a “Bulletproof” method that displays background images correctly in HTML Emails with some help of Vector Markup Language (VML) and Cascading Style Sheets(CSS).

<html>
<head>
</head>
<body background="your-image-reference-goes-here.jpg" style="margin: 0; padding: 0">
<table background="your-image-reference-goes-here.jpg" style="margin: 0; padding: 0" border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tbody>
<tr>
<td>
<!-- ALL OTHER STATIONERY BODY HTML GOES HERE -->
{{HEADER}}
</td>
</tr>
<tr>
<td>
{{TEXT}}
</td>
</tr>
<tr>
<td>
{{FOOTER}}
</td>
</tr>
</tbody>
</table>
</body>
</html> 
Note: You will need to replace the example image file names above with your own.

Explanation of the above for email layout designers:

  • The background image is set via the HTML background property inside the body tag as well as a table tag which wraps the entire layout with zero gaps between the body and containing table
  • The HTML "background=" property is used rather than the CSS "background-image:" property for compatibility with Outlook.com (which has some differences with the Outlook desktop application
  • Outlook is able to render background-image CSS, but will not honor "background-repeat:"
  • Without this redundancy, the background image may not load consistently
  • The image is set to repeat or "tile" on the X and Y axis. It is not possible to disable the background image repeating behavior without losing the ability to display the background image in Outlook
  • Additional options for advanced email layout designers: The Microsoft Office-proprietary VML is documented on this Microsoft MSDN document and can be modified directly inside your message body using the following:

This can enable you to do more advanced layouts that will render in Outlook, such as controlling image repeat-behavior, floating text over images, and others. However, it's not possible for us to provide safe and reliable "one size fits all" code snippets based on this and VML usage can result in additional visual errors appearing.

For email clients other than Microsoft Outlook, the process follows more conventional HTML/CSS guidelines. Google Mail* and some others will not display internal or external stylesheets, so you want to keep everything inline using style="".

* This includes Gmail and Google apps users viewing their mail through the Google webmail interface, or through Google's mobile applications.

Note:  Will NOT work in Outlook and some webmail clients such as Outlook.com
 <body style="background-image: URL (your-image-reference-goes-here.jpg); background-repeat: no-repeat;
 background-color: #ffffff;">

Replace "background-repeat: no-repeat;" with "background-repeat: repeat-x", "background-repeat: repeat-y", or "background-repeat: repeat-x repeat-y" for repeating.

As you can see, this is more straightforward than the Outlook-compatible variant, and this version can be configured to repeat on only one or neither axis. The background color will be treated as a fallback for when the background image ends, or in cases where it fails to load. If the above HTML is displayed in Outlook, the background color will display but the background image will not.

Remember to test thoroughly if any of the above is used. If you don't have access to Outlook 2007 and/or newer versions, Act-On is able to integrate with Litmus (requires paid subscription to Litmus, is independent of Act-On).

Create Bulletproof Background Images 

Overview

Outlook renders HTML differently due to the Word HTML rendering engine in Outlook 2007 and newer. Users often have difficulty displaying background images either in the full body of the Email or in a single table cell.

The following instructions will provide a “Bulletproof” method that displays background images correctly in HTML Emails with some help of Vector Markup Language (VML) and Cascading Style Sheets (CSS).

Vector Markup Language is an XML-based exchange, editing, and delivery format for high-quality vector graphics on the Web that meets the needs of both productivity users and graphic design professionals. XML is an emerging simple, flexible, and open text-based language that complements HTML.

Source: Microsoft

To apply a background image to a full email body:

The following method below involves setting your background image inside a custom stationery.

Utilize the following code where you will replace YOUR-FALLBACK-COLOR-HERE with either a color hex code and YOUR-BACKGROUND-URL-HERE with the URL of the background your customer wants to use.

Add the following right after the body tag:

<div style="background-color: YOUR-FALLBACK-COLOR-HERE">
 <!--[if gte mso 9]>
 <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
 <v:fill type="tile" src="YOUR-BACKGROUND-URL-HERE" color="#ffffff"/>
 </v:background>
 <![endif]-->
 <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
 <tr>
 <td valign="top" align="left" background=" YOUR-BACKGROUND-URL-HERE ">

Also, add this right before the closing /body tag:

</td>
</tr>
</table>
</div>

 

Example Code

  • First, we start with the HTML code of our custom stationery. This is a bare bones stationery as an example:

  • Next, we want to insert the code snippets provided above. As instructed, we insert the code after the body tag and also before the /body closing tag.
  • . The Final result is a “bulletproof” background stationery that we can apply to a message.
Note: This method will tile the Background image by default.

To tile the background, you can replace


<v:fill type="tile"

With

<v:fill type="frame"

To apply a background image to a single cell:

Applying a background image to a single cell gets slightly more technical, and requires you to be able to read and locate specific table data td tags where we will apply the background image. This works easiest if the email was created in the Act-On WYSIWIG editor and does not have extensive styling or CSS in use. 


  • First, we want to choose which cell we want to apply the background to. For example, the cell labeled “FIRST CELL”.
  • In the HTML Editor of the email being created,  locate the td and /td tags of the first cell that enclose the content.
     
  • Replace the first td tag with the following:
<td background="YOUR-BACKGROUND-URL-HERE" bgcolor="YOUR-FALLBACK-COLOR-HERE" valign="">
<!--[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=" YOUR-BACKGROUND-URL-HERE " color YOUR-FALLBACK-COLOR-HERE " />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>

 

Next, replace the closing /td tag with the following:

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

The resulting code looks like:

The final product:

References

 

  • Was this article helpful?