Outlook & Webmail friendly full page backgrounds

Note – this is an improved fix over our previous Outlook background fix.

This fix is something I’ve been looking at for a while – and allows html emails to display a full page background image in both outlook 2007 and webmail clients, and for the background image to degrade to a background colour when images are disabled.

Outlook 2007 supporting a full page background image

Whilst you can use the <body> tag to successfully specify a full page background image in Outlook, many webmail clients will ignore this. This has often meant that both background images and colour are also specified using a full width table, to ensure support in webmail clients.

One issue that occurs from this technique, however, is that Outlook will also render the background colour from that full width table, but not the background image, meaning that the solid background colour will display above any full page background image specified on the <body> tag in Outlook.

This fix allows you so specify a full width background image that displays in both Outlook and webmail clients, and will fall back to a solid background colour when viewed in any email client with images disabled.

Full Snippet:

<html>
<head>
<!--add Hotmail fixes, background colour in Hotmail is specificed on .ExternalClass-->
<style type="text/css">
.ReadMsgBody {width: 100%;}
.ExternalClass {width: 100%;}
</style>
</head>
<!--this specifies the background colour for webmail clients that don't recognise the body tag-->
<div style="background:#EDEDED;">
<!--this specifies the background image and colour in Outlook & other desktop email clients-->
<body style="padding:0; margin:0;" background="http://www.emaildesignreview.com/wp-content/uploads/2011/08/background-fix.gif" bgcolor="#EDEDED">
<!--100% wrap table applies the background image in webmail clients-->
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
  <tr>
    <td align="center" valign="top" background="http://www.emaildesignreview.com/wp-content/uploads/2011/08/background-fix.gif">
    <!--content goes here-->
    </td>
  </tr>
</table>
<!-- / 100% wrap table-->
</body>
</div>
</html>

Download this code snippet

Essentially what’s happening here is we’re wrapping the <body> tag in a <div> tag that has a background colour. So our content is wrapped in the following elements:

<div background:#ededed;>

This sets the background for webmail clients when images are disabled

<body background="
http://www.emaildesignreview.com/wp-content/uploads/2011/08/background-fix.gif" bgcolor="#ededed">

This sets the background image and colour for Outlook 2007 and other desktop clients. Note that the best control we have over this background image is that it will tile from the top left – more advanced CSS background controls, like background-position or background-repeat aren’t supported.

<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
  <tr>
    <td align="center" valign="top" background="http://www.emaildesignreview.com/wp-content/uploads/2011/08/background-fix.gif">
    <!--content goes here-->
    </td>
  </tr>
</table>

Finally a full width table allows us to specify a background image that is supported in webmail clients. Note that adding a background colour to this table will mean that in Outlook 2007, the background colour will show over the background image.

So now you should be all set – we’ve tested this in the major email clients, including Outlook, Gmail, Firefox and Yahoo – if you find any tweaks or use this please let us know.

  • http://www.tedgoas.com/ Ted Goas

    Hi Elliot, I haven’t seen a body tagged wrapped in a div before. Neat trick, I’ll give it a try.

    Would you say this technique improves upon Campaign Monitor’s technique (http://backgrounds.cm) that uses VML and conditional comments? Or just another, less-verbose way to achieve something similar?