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.
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>
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!
Pingback: HTML Email Full Page Background Fix (for Outlook & Webmail) | Email Design Review()
Pingback: Rendering in Outlook | Sailthru Blog()
Pingback: The trick to working background images. « Team Email()