Add a background image to individual table cells in your email

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.

Posted by Ros Hodgekiss

21 Comments

  • David
    15th July

    Sweet. Nice find!

  • Koen Mertens
    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!

  • Gregg Oldring
    16th July

    Wow. Kudos to Brian! You have my undying gratitude.

  • Bryan Quilty
    16th July

    EPIC WIN!

  • SarahJ
    16th July

    love this! I know a design I could use it on right now!

  • Mike Kinder
    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.

  • Alex
    17th July

    This is life changing! Brian deserves a cold beer!

  • EB
    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!

  • Brian Thies
    22nd July

    @EB - the workaround with background color support is in the forum post: http://www.campaignmonitor.com/forums/viewtopic.php?id=3862

  • Brian Thies
    22nd July

    @EB - the workaround with background color support is in the forum post mentioned in the blog - see “detailed background color fix” link.

  • Tom Bathgate
    29th July

    This is great and works a treat! Just what I needed for an email project right now!

  • Brendon
    29th July

    This is awesome!! Thank google for this!

  • Pix
    29th July

    OH MY HAT!—Been trying to work this out since outlook fell off the standards compliance bus. THANK YOU!

  • originalgeek
    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.

  • Ros Hodgekiss
    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.

  • Gabriel Silverman
    5th August

    Wow, great trick!

  • Kristofer
    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?

  • Gabriel Silverman
    23rd August

    Anyone have trouble getting this to work with cells that are spanning rows?

  • Gareth John
    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?

  • Relja Damnjanovic
    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 :(

  • Ken
    1st October

    great work, thanks!

Sign up for free.
Then send campaigns for as little as $9/month

Create an account