Home Resources Blog

Adding background images to email? We’ve already done the hard work for you. Check out 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 high 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>

Then there’s the HTML in the body, a sample of which looks like this:

<!-- [if gte mso 9]>
<v:background fill="t">
<v:fill type="tile" src="http://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 (ie. replace ‘http://www.example.com/background_image.jpg’) for this to work. An alternate CSS approach and tips for providing fallback colors are outlined 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, plus 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:

  1. Use the Microsoft HTML namespace declaration featured earlier in this post
  2. 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('http://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="http://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.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.

Subscribe

See why 250,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free