outlook-background 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.
Since Outlook 2007 was released, support for background images in email has been problematic.
Whilst you can use the 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 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:
Download this code snippet So what's happening here:
Using the tag, we can specify a background image and colour that is supported in Outlook:
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 background, so there is a 100% table with this info: 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 , therefore at the top of the email we need to apply a conditional statement to tell outlook to ignore the bgcolor: 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 that Hotmail wraps the email in: 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!
