Updated: New HTML Email Full Page Background Fix (for Outlook & Webmail)

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 below in the comments!

By Elliot Ross

Elliot Ross is Managing Director of Action Rocket, an email marketing creative agency based in London. You can find him on Twitter at @iamelliot

  • Pingback: HTML Email Full Page Background Fix (for Outlook & Webmail) | Email Design Review()

  • Pingback: Rendering in Outlook | Sailthru Blog()

  • http://www.facebook.com/rickkoston Rick Koston

    Hmmm I don’t get it… Tags outside of body, the div in this case, should be ignored? Are there any kind of syntax codes that are getting kicked back? I have a hard time sending something to clients knowing the code is broke from the start.

    • http://profile.yahoo.com/7HC3BPXMKUNFQWNLWBQNJMJCPU godzilla

      Welcome to the wacky world of HTML email.

      • http://www.elliot-ross.co.uk Elliot Ross

        agree – it’s a dirty fix but it works (and if the div is dropped out by other browsers the background is backed up on the full width table). Obviously it’d be great for code to be 100% valid and semantically marked up, but unfortunately, the standards of rendering in the various email clients is so bad that we have no other choice but to break the rules some times in order to ensure the design still displays properly.

  • Pingback: The trick to working background images. « Team Email()

  • http://twitter.com/alikoh alikoh

    this fix doesn’t work in hotmail now!!!