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

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="" />

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.

  • SarahJ

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


  • EB

    This is a great technique, but it doesn’t work well if you place a background image on a 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!

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

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

  • @EB – the workaround with background color support is in the forum post:

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

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

  • This is life changing! Brian deserves a cold beer!

  • Sweet. Nice find!

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

  • Brendon

    This is awesome!! Thank google for this!

  • Pix

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

  • originalgeek

    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.

  • Wow, great trick!

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

  • Kristofer

    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?

  • Ken

    great work, thanks!

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

  • 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 line, but that doesn’t help :(

  • I and a few friends are still struggling. We’re trying to adapt it to our new design which you can see at

    Anyone got any suggestions?

Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.

Join 150,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098 0800 161 5300