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="http://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. For a full code sample and explanation of how it works, or to simply join the conversation, scoot over to our forums.
15th July
Sweet. Nice find!
15th July
Real nice find indeed.
I always thought a lot of the showcase examples were, well, not “real” showcases because a lot of them use background images. And though the degrade well (mostly in Outlook) with a simple background color, it’s not the same.
Now that we have this “fix”, those showcases are actually achievable and even more inspirational than before!
So, woohoow!
16th July
Wow. Kudos to Brian! You have my undying gratitude.
16th July
EPIC WIN!
16th July
love this! I know a design I could use it on right now!
17th July
I would like to add that it works in the Notes 8 basic and standard clients. Since it works in the basic client (which is quite similar to Notes 7) I would assume it should work in a Notes 7 client as well. I do not currently have one to test on but will get one set up and post my results. If there is a way to make it work I will let you know as well.
This has been such a pain for our clients, this is going to help immensely! Thanks for sharing. And thanks to Brian for discovering and sharing.
17th July
This is life changing! Brian deserves a cold beer!
22nd July
This is a great technique, but it doesn’t work well if you place a background image on a <td> that’s in a table with a background color. The table’s background color will overlap the background image, because its z-index is greater than -1.
If anyone has a work-around for this, I’d love to know!
22nd July
@EB - the workaround with background color support is in the forum post: http://www.campaignmonitor.com/forums/viewtopic.php?id=3862
22nd July
@EB - the workaround with background color support is in the forum post mentioned in the blog - see “detailed background color fix” link.
29th July
This is great and works a treat! Just what I needed for an email project right now!
29th July
This is awesome!! Thank google for this!
29th July
OH MY HAT!—Been trying to work this out since outlook fell off the standards compliance bus. THANK YOU!
1st August
How well does this work with web-based email clients? I’m thinking since you have to put something in the head, not so well.
2nd August
Hi originalgeek, scoot over to the forum thread - it works in the major web-based email clients, too. If you move your styles inline either using our app or Torchbox’s inliner, then it should all be roses.
5th August
Wow, great trick!
21st August
Hmm, sounds all good but am I the only one not getting this to work in OL2007?
I’ve taken the complete code and made no changes to it but anyhow doesn’t get this working.
I can see the arrow background but not the blue image.
Anyone else struggling with this?
23rd August
Anyone have trouble getting this to work with cells that are spanning rows?
18th September
I and a few friends are still struggling. We’re trying to adapt it to our new design which you can see at http://www.viewbyvideo.tv/eflyer/september2010/new_eflyer.html .
Anyone got any suggestions?
21st September
Great solution, thank you so much!
I have a question though, is there any way to make background repeat? I tried adding the
background-repeat: repeat;
in the <v:image> line, but that doesn’t help :(
1st October
great work, thanks!