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

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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="http://www.example.com/background_image.jpg" />
<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 ‘http://www.example.com/background_image.jpg’) 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('http://www.example.com/background_image.jpg');" 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="http://www.example.com/background_image.jpg" /></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.

  • Ben ‘Wobbles’ Payne

    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.

  • Ben ‘Wobbles’ Payne

    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.

  • Ben ‘Wobbles’ Payne

    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.

  • Ros Hodgekiss

    Certainly, I’d love to see a preview – could you kindly [url=https://help.campaignmonitor.com/contact]email us the code[/url]?

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

  • Ros Hodgekiss

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

  • Ben ‘Wobbles’ Payne

    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!

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

  • Sam Giberson

    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.

  • Gabriel Silverman

    This is great – thanks for updating this technique!

  • Elinor Gilbert

    Thank you for updating us on this!

  • Mike Badgley

    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?

  • Mette


    Having the same problem in Outlook 2010

  • Bryan Quilty

    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.

  • Ros Hodgekiss

    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.

  • Netsite.gr

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

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

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

  • Ros Hodgekiss

    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.

  • James

    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?

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

  • Ros Hodgekiss

    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.

  • Aleks

    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.

  • Mary

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

  • Christina Evans

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

  • Stan

    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.

  • Art Webb

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

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

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

  • Ros Hodgekiss

    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 :)

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

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

  • Ros Hodgekiss

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

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

  • vinay prakash

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

  • Mark


    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


  • Ros Hodgekiss

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

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

  • Wojtek

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

  • Free image editor

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

  • GavBridger

    With the <td> 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 <td>, and vertical-align:middle;text-align:center; appended to the style attribute of both the <v:rect> and <v:shape>.

  • Jim Nichols

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

    <table width=”600″ cellpadding=”0″ cellspacing=”0″ border=”0″>
    <!– Backup background color is #DDDDDD –>
    <td bgcolor=”#DDDDDD” style=”background-image: url(‘http://www.example.com/background_image.jpg”/></v:fill>
    <v:shape id=”theText” style=”position:absolute;width:600px;”>


    Basically removed the

    tag and contents as well as all height specs…..do 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.

  • Bang Andre

    I have just add same as tut, when I verify at litmus.com not work

  • MatDojer

    Tested using putsmail to make it work on Outlook 2010 but with no avail

  • Krati

    hi, I am using your background image generator to generate bg image,it is working fine in outlook 2003, 2007, 2010, 2011, but it is not working in 2013 and 2016 version. And also it works fine in Chrome but it sometimes doesn’t work in Firefox. Is there any solution for it?

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