Home Resources Blog

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

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.

  • David

    Sweet. Nice find!

  • Koen Mertens

    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

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

  • Bryan Quilty


  • SarahJ

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

  • Mike Kinder

    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

    This is life changing! Brian deserves a cold beer!

  • EB

    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

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

  • Brian Thies

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

  • Tom Bathgate

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

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

  • Ros Hodgekiss

    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

    Wow, great trick!

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

  • Gabriel Silverman

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

  • Gareth John

    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

    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

    great work, thanks!

  • powerbuoy

    This doesn’t work at all for me. I don’t have Outlook 2010 to test for myself, but am using Hubspot’s “Test in email clients” tool and no background image is rendered whatsoever.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.


See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free