Adding background images to email? We’ve already done the hard work for you. Check out Stig‘s ‘Bulletproof Email Background Images’ code generator at emailbg.net
Also, a more elegant and up-to-date method for displaying background images can be found here.
You may have read earlier about our approach to applying a background image to an email. This involved not only adding a background image to the entire HTML page, but wrapping all content in a table with a background image applied to it. However, there was a limitation to this method, in that while you could apply a background image to the entire table, you couldn’t apply one to an individual table cell. Thanks to one of our star customers, Brian Thies, we’ve been shown a little code that not only will allow you to add a background image to a table cell, but works in most major email clients, too!
The skinny is that you have to replace your <html> tag with:
<html xmlns:v="urn:schemas-microsoft-com:vml">… then add this to your styles in <head>, too:
v\:* { behavior: url(#default#VML); display: inline-block; }As for the <td> you wish to add the background image to, add the following within the cell (where width and height are the dimensions of the image):
<!--[if gte vml 1]>
<v:image style='width: 600px; height: 402px; position: absolute; top: 0; left: 0; border: 0; z-index: -1;' src="https://www.yourlocationhere.com/image.gif" />
<![endif]-->This technique has been tested and shown to be working in most major email clients, except Lotus Notes 6/7 (typically). Most important of all, it forces a background image to display in Outlook 2003/2007/2010! If you scroll to the end of Brian’s forum thread, you can also see a detailed background color fix, too.
The problem of background images not displaying in a variety of major email clients has caused a lot of headaches for a while now. While these two approaches to the background image issue may be considered to be a bit, well, ‘hackish’, considering the state that email clients are in, we’d be hard-pressed to find a more elegant and widely-accepted solution any time soon. Hopefully we can now put a lot of past rendering nightmares behind us and now use background images to our heart’s delight.
Many thanks to Brian for sharing this with us.
