Add a background image to individual table cells in your email

July 15, 2010

This technique no longer seems to reliably display background images - we recommend you try this method instead.

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.

Posted in: Tips & Resources

21 Comments

David
July 15, 2010 1:34pm

Sweet. Nice find!
Koen Mertens
July 15, 2010 5:24pm

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!
Gregg Oldring
July 16, 2010 12:49am

Wow. Kudos to Brian! You have my undying gratitude.
Bryan Quilty
July 16, 2010 1:47am

EPIC WIN!
SarahJ
July 16, 2010 4:10am

love this! I know a design I could use it on right now!
Mike Kinder
July 16, 2010 10:45pm

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.
Alex
July 17, 2010 12:12am

This is life changing! Brian deserves a cold beer!
EB
July 22, 2010 8:29am

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!
Brian Thies
July 22, 2010 5:00pm

@EB - the workaround with background color support is in the forum post: http://www.campaignmonitor.com/forums/viewtopic.php?id=3862
Brian Thies
July 22, 2010 5:01pm

@EB - the workaround with background color support is in the forum post mentioned in the blog - see “detailed background color fix” link.
Tom Bathgate
July 29, 2010 4:49am

This is great and works a treat! Just what I needed for an email project right now!
Brendon
July 29, 2010 3:57pm

This is awesome!! Thank google for this!
Pix
July 29, 2010 6:14pm

OH MY HAT!—Been trying to work this out since outlook fell off the standards compliance bus. THANK YOU!
originalgeek
August 1, 2010 2:45pm

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.
Ros Hodgekiss
August 2, 2010 9:41am

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.
Gabriel Silverman
August 5, 2010 1:50am

Wow, great trick!
Kristofer
August 20, 2010 8:06pm

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?
Gabriel Silverman
August 23, 2010 2:07am

Anyone have trouble getting this to work with cells that are spanning rows?
Gareth John
September 18, 2010 3:37am

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?
Relja Damnjanovic
September 20, 2010 8:56pm

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 :(
Ken
October 1, 2010 2:38am

great work, thanks!

Blog