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

A few months ago, we covered a couple of methods for applying background images to HTML emails, courtesy of code guru and forum celebrity, Brian Thies. Since then, he’s refined the code required to reliably get background images to display in Outlook ’07, Gmail and other finicky email clients, so we thought it was high time to publish an update.

Applying a background image to the body of an HTML email

This approach comes in two parts. First, we’re going to use a table of width="100%" to ensure that background images display in clients like Gmail. Then, using Brian Thies’ updated approach, we’re going to apply Microsoft VML to force images to display in Outlook ’07 & ’10. Here’s the code in two steps, beginning with the Microsoft-specific HTML namespace declaration:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns:v="urn:schemas-microsoft-com:vml">

Then there’s the HTML in the body, a sample of which looks like this:

<!-- [if gte mso 9]>
<v:background fill="t">
<v:fill type="tile" src="" />
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<td align="center">
<table border="0" width="600" cellspacing="0" cellpadding="0">
<td>If you can see this over the image, background images are successful.</td>

Note that VML images need to be hosted by a 3rd party – you will need to provide a background image (ie. replace ‘’) for this to work. An alternate CSS approach and tips for providing fallback colors are outlined in our earlier blog post.

Applying a background image to a table cell

In an earlier post, we specified a method for setting a background image to cells. While it did the trick, it didn’t allow for background images to be tiled, plus it used a lot of CSS to achieve a seemingly simple result. To overcome this, we swapped out the original VML image class for rect and fill for the same result, with less code.

For a repeating background image in a table cell:

  1. Use the Microsoft HTML namespace declaration featured earlier in this post
  2. Adapt the following VML code sample:

<table border="0" width="600" cellspacing="0" cellpadding="0"><tbody><tr><!-- Backup background color is #DDDDDD --><td style="background-image: url('');" valign="top" bgcolor="#DDDDDD" width="600" height="120"><!-- [if gte mso 9]><v:rect style="width:600px;height:120px;" strokecolor="none"><v:fill type="tile" color="#DDDDDD" src="" /></v:fill></v:rect><v:shape id="theText" style="position:absolute;width:600px;height:120px;"><![endif]-->If you can see this over the image, background images are successful.<!-- [if gte mso 9]></v:shape><![endif]--></td></tr></tbody></table>

Note that height and width dimensions in the VML have to be the same as the height and width of the table cell. To prevent the image from repeating, you can either match the background image dimensions to cell width and height, or replace <v:fill type="tile" with <v:fill type="frame" to resize the image to the dimensions defined in <v:rect>.

Many thanks again to Brian for tirelessly sharing his know-how with coders and designers everywhere. If you have questions about either approach or would like suggest improvements, please feel free to read and contribute to this forum thread.

  • Aaron

    I’m having trouble with my text formatting after I use this code. Nothing seems to work.

  • Aaron

    I’m having problems with my text formatting after implementing this code. It defaults back to Times New Roman, left-align. Anyone else having this problem?

  • This is great – thanks for updating this technique!

  • Mike and Mette – Could you kindly visit this forum thread and post your code if you can’t find an answer there? That’s the best way to find out what’s going on.

    Bryan – I was having this issue earlier and had to set negative top and left values in my VML code to get the positioning just right (eg. …position:absolute; height:130px; width:600px;top:-16px;left:-16px;…). Ugly yes, but give it a shot and let us know how you go.

  • I am experiencing an issue not so much with getting the background image to display, but when it does, it shifts the email down exactly 10 pixels. I can send you the code and / or screenshot. If you could find the time to look at it and give me some guidance, that would be tremendously helpful.

    I’ve always noticed that Outlook ’07 throws in what seem to be their own transparent gifs that throw off thin rows within a table.

  • Mette


    Having the same problem in Outlook 2010

  • This is absolutely amazing, thanks so much for posting this!

    I’ve just tested it out and it worked perfectly across Gmail and Outlook 07… but ofcourse, it didn’t work with Lotus Notes.

    Any chance of an update to emcompass this?

  • Craig

    Forcing images to appear in email is how spammers track recipients and one of the ways phishers try to obscure the links they are trying to get us to click on.

    It would be far better to encourage everyone to avoid bloated HTML email altogether and to read email in plain text mode anyhow, avoiding the risks.

  • I never understand why MSIE have this complicated special filters and no support for the standard code.

  • Jorn

    How about the case in which two background images are defined inside the same e-mail? Although I defined two unique id’s, like “theImage1” and “theImage2”, Outlook 2007 just loads the last defined image over the first one.

  • Thank you for updating us on this!

  • Using the examples provided I am unable to get the text to appear on top of the background image within Outlook 2010. When I tested in Outlook 2007 it worked fine. I’m hoping there is some sort of workaround for 2010?

  • A trap for young players.

    Thank you a ton for your help on this. (I better lay off the egg nog!) I have now added that code and it is working perfectly. Our design time is going to be fifth’d by this!

    Cheers and have an awesome one!

  • I just tried this and it crashed mine and my colleagues Outlook 2007. Anyone else getting this issue? I would love to use background images in emails.

  • Jarrod Taylor

    Hi Ben, did you try to apply the background image to the body of the email, or a single table cell? This is a new issue to me, so I’d love to find out why it’s happening.

  • It was to a single cell, which had a nested table. If you want to, I can send you a preview. I am going to remove the tables from within and see if that help.

  • Here is the first sentence of the really long error message … This message can appear if you attempt to embed a drawing object inside another object that was not designed to accept the object.

  • Certainly, I’d love to see a preview – could you kindly [url=]email us the code[/url]?

    – Ros (otherwise known as Jarrod… I think it’s the new haircut that’s confusing our CMS.)

  • Laura – It should be fine without the p tags. As long as the height of the table cell is maintained, then all is well.

    Jorn – Certainly scoot over the forums, this scenario may have been discussed there.

  • Hi Ben, I just emailed you back – it turns out that the <!–[if gte mso 9]>

  • LauraT

    Is there a way for the contained text to not have to be in a

    tag? Our best practices have shown that if the text is not in a

    tag, that it will render correctly (size/line height) across 99% of email providers.

  • Thanks for this post, it was a life saver today. It is definitely nice to finally have a solid solution for when I need to develop an HTML email with background images.

  • Ed Doherty

    This is causing the background images to overlap other content in Outlook 2010. Is this because of using the positioning? Is using position:absolute required?

  • Mary

    The whole of our front-end team is crying tears of joy.

  • Great technique!

    Just thought I’d add that in Outlook ’10 if you have text/images in the cell where the vml code sits it adds some spacing/padding. For example I had a td cell with a background image as outline above, and inside it was an image button. The button aligned perfectly in all email clients but in Outlook ’10 the image had extra spacing around it. After spending a considerable amount of time trying to pin point where this spacing was coming from I got desperate and removed the vml code to see if that caused it and sure enough it did. So just be wary of that little tricky situation ;)

    Awesome stuff though, props to Brian.

  • Hi Ed, it may be a combination of positioning, height/width or z-index – if you post your code in the forums, we’ll be able to find out.

  • I’m getting the table below it showing up tucked underneath the background image in Outlook 07. Online version is OK though, of course :)

  • Has anybody had a problem with this fix rendering coded bullets(•) wrong in

  • the background=”” html attribute isn’t used in the free templates provided on this site, it seems. Took me about an hour to figure out that’s why the background images weren’t displaying in Gmail.

  • Hi Alex, this is certainly very unusual. If you could kindly post your code over in our forums and let us know which email client you’re seeing this in, we’ll certainly take a look and try to work towards a fix :)

  • Alex

    Is it normal for the cursor to change into a ‘move’ cursor (a cross with 4 arrows) on rollover?
    Anyone know how to override or avoid this?

  • @Jeremy – Could you kindly post your code and the details above in our ‘Email Design and Coding’ forums? We’ll gladly take a look and see how we can help here. Note that Outlook 07/10 are notoriously tricky clients to work with, so it’s unlikely we’ll get your newsletter to look as great as it does in say, Apple Mail or in the browser.

    @Johng – This isn’t a bulletproof solution by any measure, but it’s the best method we’ve got for reliably displaying background images in Outlook 07/10. There is a very good chance that adding too much text will break your layout, the cell height will collapse etc so I highly recommend testing as much as you can (as with any design). If necessary, add a little spacer image to prevent the cell from collapsing and -webkit-text-size-adjust to minimize text resizing.

  • Johng

    I don’t get how you can work with a table cell that has a definition for height. Every text change will change the height, and different users will have different setups and preferences that will cause the type to display differently, force the td to break, and screw up the way the background displays.

    … or am I missing something?

  • Jeremy

    Thanks for the response Ros, I posted a section of the newsletter over at the forums, under Jeremy Ruth. Thank you very much for the effort and your time!

  • Jeremy

    I’m having a lot of trouble with styling images and anchors within the VML objects. The newsletter looks great in all other clients except Outlook 2007/2010. I have applied the code here and I have all the backgrounds working fine, I can see all content above them also. My issue is when I attempt to style the nested images and anchors within the object.

    Outlook seems to be picking and choosing what inline styling it keeps. I can remove the VML object and Outlook will style the content once again. p tags seem to style OK for the most part. I am having trouble with nearly every other nested element though. Even my nested table that is an actual table seems to lose it’s border styling when in a VML object. Is there something that I am doing wrong? Oh yeah, my code is all HTML and inline styling, no divs or css in the header.

  • Wow!
    I follow the instruction, and the first e-mail really impressed some one….

  • Hi,

    It seems to work ok but when I add the Microsoft-specific HTML namespace declaration it makes my email go into junk instead of the inbox, it gos into the inbox fine without the declaration but then the background images dont work.

    Has something changed with this recently as I never seemed to have any trouble getting background images to display in Outlook, Im on 2007


  • Wojtek

    Me again, my bad;) In fact it works in Thunderbird as well:)

  • Wojtek

    Great solution:)

    But is there any way to make it work in Thunderbird as well? Because what I get applying this solution in Thunderbird is an additional empty block (supposedly the one that get filled in case of outlook).

  • @Mark – That’s really unusual, we haven’t seen this happen on our end. Feel free to post your email code on our forums, as we can potentially test it out and offer suggestions there.

  • So it works in Thunderbird. That’s great news. It means the problem is me doing something wrong.

  • Quick question…..this looks to be a great help, but I’m having what I hope to be a simple issue. I am wanting to use background images displayed in cells within Outlook but I don’t need text to be displayed in-front of them. I have altered the code to look something like this….

    <!– Backup background color is #DDDDDD –>

    <!–[if gte mso 9]>

    < ![endif]-->

    Basically removed the

    tag and contents as well as all height specs… I have to enter the height to make this work? I am wanting the image to repeat in the Y but not the X direction so I have labeled the width but left height open ended.

  • GavBridger

    With the version, Is it possible to align the content of the cell centrally, both horizontally and vertically? I have align=”center” valign=”middle”, and vertical-align:middle; text-align:center; appended to the end of the style declaration of the

    , and vertical-align:middle;text-align:center; appended to the style attribute of both the and .

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