August 30, 2011

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

Note – we now have a better fix for this issue, which we recommend over the below fix. We’ve kept the content on this page for reference only.

Outlook 2007 supporting a full page background image

Since Outlook 2007 was released, support for background images in email has been problematic. 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%; background-color:#EDEDED !important;}
</style>
<!--this turns off the 100% table background colour in Outlook-->
<!–[if gte mso 9]>
<style> .bgemailfix{background-color:transparent !important;}
</style>
<![endif]–>
</head>
<!--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 colour and background in webmail clients-->
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
  <tr>
    <td align="center" valign="top" class="bgemailfix" style="background-color:#EDEDED;" background="http://www.emaildesignreview.com/wp-content/uploads/2011/08/background-fix.gif">
    <!--content goes here-->
    </td>
  </tr>
</table>
<!-- / 100% wrap table-->
</body>
</html>

Download this code snippet

So what’s happening here:

Using the <body> tag, we can specify a background image and colour that is supported in Outlook:

<body style="padding:0; margin:0;"
background="http://www.emaildesignreview.com/wp-content/uploads/2011/08/background-fix.gif"
bgcolor="#EDEDED">

Note that we can’t set CSS properties like repeat or position on this background image – the image will tile from the top left corner of the email. Note that also Outlook will add a 15px page margin, that cannot be removed.

For all other email clients, they will ignore the <body> background, so there is a 100% table with this info:

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

We have to declare the background image using background=”” so it’s supported in Gmail.

However, Outlook will pick up the background colour from this and display it over the background image specified in <body>, therefore at the top of the email we need to apply a conditional statement to tell outlook to ignore the bgcolor:

<!–[if gte mso 9]>
<style> .bgemailfix{background-color:transparent !important;}
</style>
<![endif]–>

However, just to add to the fun – Hotmail also picks up that conditional statement (something to do with displaying content from Word properly in email), and so this code will also disable the bgcolor in Hotmail – so we need to add an additional fix to our existing Hotmail style fix, which adds a background colour to the <div> that Hotmail wraps the email in:

<style type="text/css">
.ReadMsgBody {width: 100%;}
.ExternalClass {width: 100%; background-color:#EDEDED !important;}
</style>

To implement this you will need to update the page background hex code in three locations in the snippet above:

#EDEDED

…and update the background image URL in two locations:

http://www.emaildesignreview.com/wp-content/
uploads/2011/08/background-fix.gif

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!

  • http://twitter.com/Hilly_2009 Stephen Hill

    In the conditional statement, is it necessary to duplicate all styles that are in the previous style tag.

    For example, you only have 2 bits of CSS prior to sort a problem in Windows Live Mail (I believe?). But in my ‘template’ I also include a lot of ‘reset’ styles…

    e.g.

    body {
        margin: 0;
        padding: 0;
    }

    img {
        line-height: 100%;
        outline: none;
        text-decoration: none;
    }

    So would it look something similar to…

    body {

        margin: 0;

        padding: 0;

    }

    img {

        line-height: 100%;

        outline: none;

        text-decoration: none;

    }

    body { margin: 0; padding: 0;}img { line-height: 100%; outline: none; text-decoration: none;}.bgemailfix {    background-color: transparent !important;}

    Hope that makes sense!

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

      ah see what you mean

      so in theory, the body and img you only need to specify once, then the conditional bit just has bgemailfix. When I was testing this I had other CSS working there too that I stripped out for the demo, and that worked ok. It’s worth noting though, that the body{margin:0;padding:0; won’t have an effect in Outlook anyway as it forces a 15px border on the body regardless.

  • http://www.facebook.com/profile.php?id=718376462 Tony Salazar

    This looks promising.  I’m going to bookmark this for testing later in the week. Great read.

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

      cool – let us know how you get on!

  • Kevingroenendaal

    Great and useful post.

  • http://twitter.com/bsisolak Brian Sisolak

    This stumped me for a bit, mentioning it in case anyone else makes this mistake. When I started testing the code I changed the “–” after the exclamation mark to “–“. Just out of habit I guess. When I did that in Outlook 2000, 2002, 2003 and Lotus Notes 8.5 I was seeing the conditional comments displaying in the body (see image).

    After quite of bit of scratching my head I removed the “–” and it works fine now. Stripped down the code to just this for testing.

       
           
               
                .bgemailfix{background-color:transparent !important;}
           
           
       
       
            Content here
       

    Everything seems to work great so far. Tested in Yahoo, Hotmail, Gmail, AOL and Comcast in FF3.6 and IE7-9.

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

      cool good work!
      There must be some other uses for a conditional comment that exempts Outlook, going to think about that.. 

  • Grant Evans

    The “if gte mso 9” section breaks the layout in Entourage 2004 & 2008.  When I do my rendering testing through Email On Acid all of the body copy is cleared out.  Has anyone else seen this behavior in Entourage? If I remove that it works.

    • http://www.emaildesignreview.com Elliot

      yes just tested that and having the same issue. I have a simpler fix for this issue, I’m going to update this post later today

      cheers e

  • cory c

     it does not work when you have background in table .

  • Aenima

    Thank you very much, you helped me a lot!