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.

  • SarahJ

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

  • EPIC WIN!

  • 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: http://www.campaignmonitor.com/forums/viewtopic.php?id=3862

  • 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 http://www.viewbyvideo.tv/eflyer/september2010/new_eflyer.html.

    Anyone got any suggestions?

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

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