Home Resources Blog

While it’s possible to get background images to display in (almost) every email client, for many the techniques involved have always been considered ‘too tricky’ to code into email newsletters. However, our talented (and handsome) Stig has decided to change all that with two new code generators.

Like most of you, I’d rather undertake practical studies in Mayan torture than ever have to write a line of Microsoft’s VML code. Same goes for testing background image support across finicky clients like Outlook, Gmail and Hotmail. So it’s with much joy that we’ve embraced the latest from Stig’s lab, a ‘Bulletproof Email Background Images‘ code generator. And by joy, we mean the bitter memory of countless hours spent coding and testing by hand, when we could have been drinking PBR and swaying moodily to Ratatat. That’s how I spend my free time, anyway.

As the techniques for applying background images to entire email campaigns vs. table cells are considerably different, there are options for generating code for both scenarios. A word of warning in regards to the former, though – Outlook 20xx has been known to crash when a background image has been deemed ‘too big’ (either in file size or dimensions), so make sure you test your campaign in a real, live copy of Outlook before going for gold.

… and bulletproof buttons, too!

Not satisfied with simply releasing one highly-useful piece of email kit, Stig has also come good with emailbtn.net, a code generator for creating bulletproof email buttons. These buttons are great for adding a call-to-action to your design (eg. Read More, Buy Now) and don’t look shabby, either. Simply opt for plain-color buttons or use a hosted background image, tune up your styles and woosh, out comes the required HTML/VML code. If you have some HTML coding experience, you’ll be adding bulletproof buttons to your email designs faster than a cat in freefall.

Hopefully you’ll find these generators to be a big help when coding your next email campaign by hand. If you’re a fan, why not give Stig a high-five in the comments below!

  • DRoss


  • David Padilla

    I can’t wait to test it. Thank you for sharing this. Imagine the possibilities!

  • DRoss

    Nice work on the generators. One issue just noticed was the color picker opens up but won’t allow me to select a color in Chrome/Mac. Didn’t try it in any other browsers.

  • Alex

    One bug with the Bgimage generator. When you generate a background image for a single table cell at a set width/height it adds this:

    <o lock=”” selecti=””/>

    If you set a background using this VML hack on a cell and it has this o:lock on it none of the links within that cell will work in Outlook 2007 & 2010.

    If you remove the <o lock=”” selecti=””/> from the code the links will work. The downside is, when you click anywhere within/on the cell you’ll see crop tools around the whole cell in Outlook 2007 & 2010. You won’t actually be able to crop, resize or rotate..just see the tools.

    I’d much rather have that than broken links! Remember people; test, test & test again!

    Bloody brilliant tool though, Stig.

  • Stig Morten Myre

    Thanks so much for the awesome feedback, guys!

    @DRoss, thanks for the heads up! It turns out some of the functionality broke since I had stupidly pointed to http://code.jquery.com/jquery-latest.js instead of the specific version I needed. Fixed now!

    @Alex, nice catch, thank you! Using <o lock=”” selecti=””/> does result in more familiar behavior, but I hadn’t realized the effect it had on links. I’ll think about a way to present this information on the website somehow.

  • Rhys Harry

    Really useful, thanks a lot.

    If you use a relative image link, not absolute, will CM handle it when importing html as it does with other images?

  • Julian Wellings

    Stig thanks for this, unfortunately I can’t get it to work in Outlook 2010….
    Only thing I’m changing is deselecting b/g image.
    Any ideas what’s up?

  • Alex

    @Julian Wellings: Make a topic on the forum with your code and I’ll take a look, if you like.

  • Julian Wellings
  • Stig Morten Myre

    @Rhys, good point! The VML does need an absolute path to your hosted image, since Campaign Monitor doesn’t import images references in VML. We might consider doing that eventually though.

    @Julian and @Alex, thanks for posting that – I’ve replied in the forums.

  • Finge

    Wow, Stig! Amazing work. This is a fantastic resource and will be one of the most used assets in my toolbox!

  • Nick

    A great tool. So far it’s working great for background images, I can imagine this becoming a often-used tool.

    However, I’m finding the button generator code is causing havoc in Lotus Notes 8.5. Anyone else experiencing this?

  • Stefan Braat

    Nice work, i only get a problem when using links in the <div>, in Outlook 2010 i can see the link but cannot click it.

    Anyone else having this problem?

    Looking forward using background images.

  • Brenna

    When I click the button in Outlook 2010, the rectangle turns an inverse color. Any way to work around this?

  • Stig Morten Myre

    @Nick, I’d definitely be interested in seeing the problems the button code is causing for you in Lotus Notes 8.5. I’ve only tested it in Lotus Notes 8, where it seemed to render fine.

    @Stefan, as Alex pointed out above, this was caused by the <o lock=”” selecti=””/> tag and . I’ll be removing that and xmlns:o=”urn:schemas-microsoft-com:office:office” from emailbg.net, so hopefully you won’t run into that issue again.

    @Brenna, unfortunately I haven’t found a way to prevent the inverse color down state on VML buttons, and I’m not sure it’s avoidable. If anyone finds a solution, do let me know.

  • Pauline

    Amazing Stig! Testing this now. So excited.

  • Blitz

    Gobsmackingly amazing. Jaw on the floor. Proper buttons in Outlook 2007/10, how novel!!

    I had one issue, which may be specific to how I used this. I have two columns in a table, each column has a button with this code. Gmail collapses the 2 column layout into one after using this button.

    I’m investigating this, but thought I’d post as an observation to see if anyone else has this quirk.

  • Stig Morten Myre

    Thanks guys, stoked to hear it’s being put to good use!

    @Blitz, if you’d like, we can definitely have a look at what might be causing this issue.

    Kindly post your code and a screenshot in the forums, or send it to support@campaignmonitor.com, and we’ll check it out.

  • Courtney Duvendack

    The sites don’t seem to be working for me, are they done?

    Really excited to try and use this!

  • Ros Hodgekiss

    Hi Courtney, that’s unusual – emailbtn.net and emailbg.net seem to be business as usual from here. Kindly try again and let us know if you have any more issues using these sites.

  • Kris

    I love Stig!

  • Dave Cross

    way to go, Stig!

  • Alex

    Thanks so much for all the updates, I like the sound of this but like Ross I also would rather run a marathon a day for the next decade than attempt coding! So this is to ask if this background image coding can be implemented as an option onto the basic template builder?

  • Sebastian Green

    Has anyone tried background images with responsive e-mail? How did you get one? If you have to specify a fixed width of the image how does that work?

  • Ros Hodgekiss

    Alex, it’s certainly something we’ve considered. Stay tuned to this blog, as we’ll be sure to announce any updates to the template builder here.

    Sebastian, we have an in-depth chapter on displaying images on mobile devices in our Guide to Responsive Email Design. I think you’ll find lots of advice there, but be sure to let us know if you have any questions :)

  • Erik Woods

    If this were truly flexible, it should allow for automatic widths. I understand why it is the way it is…. however…. I’ve found some success using something more like this:

    <table border=”0″ cellpadding=”0″ cellspacing=”0″ style=”background: #d6d6d6; border: 2px solid #000000; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; color: #000001; text-transform: uppercase;”>
    <!–[if mso]><td height=”40″ width=”10″></td><![endif]–>
    <td align=”center” valign=”middle” style=”line-height: 20px;”>
    <font color=”#000001″ face=”Arial, Verdana, sans-serif” style=”color: #000001; font-family: Arial, Verdana, sans-serif; font-size: 20px; line-height: 20px;”>
    <a href=”http://example.com” style=”color: #000001; display: block; padding: 10px; text-decoration: none;”><span style=”color: #000001; text-decoration: none;”>CUPCAKE GET</span></a>
    <!–[if mso]><td height=”40″ width=”10″></td><![endif]–>

    The padding is for 99% of email clients and the mso bits are for…. mso…. since they don’t like padding on anchor tags.

    The colors, font sizes, etc are all irrelevant – it’s the padding in combination with the conditional comments here that make things work well.

    Haven’t tested in Lotus Notes though.

  • Tom Hofacre

    I’m fairly new to HTML email, but I cannot get background images to show up in Outlook 2010 no matter what I do. I thought this code generator would be the answer, but still no luck.

  • Ros Hodgekiss

    Hi Tom, you’re more than welcome to post your code on our forums – we have a great community that are always willing to lend a hand. Best of luck! :D

  • Clara Maria Løfgren

    Stig is awesome!

  • Anthony G

    What if I want the background image to be a link in Outlook, how can I accomplish that? Tried adding a link wrapper inside a TD, but that doesn’t work in Outlook like it does other clients. Anyone have any luck with this?

  • Ros Hodgekiss

    Hi Anthony, making a background image a link won’t work, so your best bet is to either fill the entire cell with a linked element, or alternately, you can try wrapping the surrounding table in an <a> tag. Depending on how you do this, both approaches can be a bit hairy, so make sure you test thoroughly.

    If you have any questions about this, feel free to contribute to our forums so we can share code :)

  • Stephen Waddock

    I just tried this. I uploaded the html and images to the server, previewed in Internet Explorer and then Send to email. When I received and opened the email it resolved as an image. The text was not separate from the image.

  • Ros Hodgekiss

    Hi Stephen, mind us asking, which email client did you see this in? Feel free to post details in our forums, as we’re keen to help out :)

  • Steven

    Do you have any examples of emails and code for us to see it in action?

  • Rob

    Hey CM, if you’re going to be promoting this technique, you should absolutely update your image importer to work with these VML images. Seems like a huge oversight.

  • Ros Hodgekiss

    Hi Steven, your best bet is to test out some of the code produced yourself in Outlook/Gmail – that’s the best way to see it all in the wild :)

    Rob – Thank you for the great suggestion here, however this technique is admittedly, still a bit experimental. In some rare instances, has been known to cause issues in Outlook (as mentioned in the post). Personally, I think the liberal use of background images encourages bad email design habits, so that’s why we’ll only recommend using this technique if you know exactly what you’re up against.

    That said, we may work it into our template builder at a later date, so happy to keep you posted on this one :)

  • Howard

    Can’t get it to work. I’ve tried inserting the code from Stig’s generator but I simply can’t get it to work.

    Is it because I’m trying to put the code into a MYSQL DB? Do I need to configure MYSQL to accept VML code?

    It looks like when I receive the email that the VML code is tossed out.

    Thanks in advance

    <div><!–[if mso]>
    <v roundrect=”” xmlns:v=”urn:schemas-microsoft-com:vml” xmlns:w=”urn:schemas-microsoft-com:office:word” href=”https://buttons.cm” arcsize=”10%” strokecolor=”#1e3650″ fill=”t”>
    <v:fill type=”tile” src=”http://i.imgur.com/0xPEf.gif” color=”#556270″/>
    <center>Pretty Button</center>
    Pretty Button</div>

  • Ros Hodgekiss

    Hi there Howard, without knowing much about how you’re sending email campaigns or how this code is being inserted into a database, it’s likely that the code is going missing at send time, not in the email client itself. Feel free to post more details in our forums – we’re happy to help out with tricky questions there, regardless of which platform you’re using :)

  • Debbie Robinson

    Hi, I just can’t seem to get this backgroiund image to work at all in PC Outlook. Mac Outlook is fine.

    Code before body table is:

    <body 0; padding: 0;”>

    <!–[if gte mso 9]>
    <v:background xmlns:v=”urn:schemas-microsoft-com:vml” fill=”t”>
    <v:fill type=”tile” src=”http://webtgdh.co.uk/home/sites/webtgdh.co.uk/public_html/images/signature.gif”>

    Any help would be greatly appreciated!!!



  • Debbie

    <body 0; padding: 0;”>

    <!–[if gte mso 9]>
    <v:background xmlns:v=”urn:schemas-microsoft-com:vml” fill=”t”>
    <v:fill type=”tile” src=”http://webtgdh.co.uk/home/sites/webtgdh.co.uk/public_html/images/signature.gif”>

  • Debbie

    Aargh how do I add code?

  • Debbie

    <!–[if gte mso 9]>
    <v:background xmlns:v=”urn:schemas-microsoft-com:vml” fill=”t”>
    <v:fill type=”tile” src=”http://webtgdh.co.uk/home/sites/webtgdh.co.uk/public_html/images/signature.gif”>

  • Debbie

    Sorry I see it’s all on there now.

  • Debbie Robinson

    Not my images, the code above.

  • Ros Hodgekiss

    Hi Debbie, could you kindly post your code and any other details in our “Email Design and Coding” forums? Unfortunately, the comments section of our blog posts are not cut out for posting or reviewing code. Sorry for the trouble, but we really hope we can assist you there.

  • Vic Dinovici

    BlackBerry 10 (BB10) does not support background-image.

  • Richard Bland

    I’ve noticed in Outlook 2010 that the image background, although now showing using v:fill “frame” with an exact width and height, knocks the table out of place a little. It kind of looks like everything moves right by about 20pixels.

    I can’t see if I am doing anything wrong. In other email clients everything works fine. I’ve used no padding or margins.

    Has anyone else experienced this?

  • Ros Hodgekiss

    Hi Richard, I’ve seen this previously – you can certainly try experimenting with adding positioning via style=”” to the VML tags. This is how I’ve previously solved the issue. For example… <v:fill sty=”” le=””” position:absolute;=”” top:5px;=”” left:5px;=”” &#34;=””>

    Let us know how you go :)

  • Jade Francis

    The background fix adds a extra gap at the bottom of the td I have the background fix on when i don’t fix an height. Any way to get rid of this?

  • Ros Hodgekiss

    Hi Jade, this is a curious one – my first suggestion is to add table, td &#123 border-collapse: collapse; &#125 to your CSS and see if that helps. If still no luck, kindly try posting a screenshot and your code to our forums – we’re always happy to help there. Best of luck!

  • Lawrence

    Is there a way to have the image not tile? I’d like it displayed only once and centered in the table cell.

  • Carolin Moll

    Great tool! I’m using it very often for my HTML-Emails.
    One problem: Combining buttons and backgrounds doesn’t work for me. The buttons appear at the wrong position … Is there a workaround for that?

    @Nick: I’ve Problems in Lotus notes 8.5., too. There is no button, only a text-link without a background. But in Lotus Notes 8 everything works fine.

  • Ros Hodgekiss

    Hi Lawrence, if you change two lines as per this Gist, you should be able to get a single image that stretches across the width of the container. Sadly, getting a single, centered native-width image isn’t possible with this technique at present, I’m sorry to say.

    Carolin – Sadly, there isn’t a workaround for positioning issues when nesting buttons in backgrounds just yet. It’s a limitation that we should make more clear, sorry about that!

  • Jane Wood

    Hi there, I have implemented the code but in Outlook 2007 it doesn’t show up and it is displaying the contents of the bottom section with the two images side by side on top of each other. Any ideas much appreciated!


  • Stephen Jesson

    Hi Jane,

    Thanks for getting in touch and sorry to hear you’re seeing this Outlook issue.

    Just taking a quick look at your code, it actually looks really solid to me, so great job there, however I did just notice you have a “spacing for mobile devices” table between your left and right column nested tables, and I think this may be causing the spacing problem here, so would you be able to try removing this and try again, to see if this is where the issue lies?

    Once we’ve identified this, we’ll then hopefully be able to find a workaround :)

    Thanks for your patience and let us know how you go here!

  • Scott Clasen

    I am using the button generator code but still see NOTHING in Outlook 2013 and other previous Outlook versions.

    I have no idea what I’m doing wrong. I’m using a HTML file generated in Campaign Monitor, I see the special <!–[if mso]> in all the code for the buttons but it doesn’t render in Outlook! Is anyone else experiencing this???

  • Scott Clasen

    My last comment got cut off. I see the special <!–[if mso]> in the code for each button but I goth nothing in Oulook. Is anyone else experiencing this?

  • Scott Clasen

    Whoops, I tried pasting code I see and that’s what cut off my comment. I’m trying to say I see the special if MSO code for the buttons and everything looks right but I see nothing in Outlook! What am I doing wrong?

  • Davida Fernandez

    Hi Scott,

    Sorry to hear you’ve run into issues there! Can you drop us a line at support https://help.campaignmonitor.com/contact with your code so we can take a look? It definitely should work in Outlook 2013, so I’m sure there’s something that just needs a quick fix. :)

  • Pardis Alizadeh


    We are using the normal VML button codes in our email template but we noticed that in the Android clients(mobile and tablet), the button is rendering 2 times. It means that android passes the tag of <!–[if mso]> and creates 2 buttons,does Anybody have the solution for that?

  • Paul West

    Hey Pardis,

    That’s no good! The buttons should work okay in the default Android mail app, so we’d be keen to investigate. Would you be able to send your email HTML code across to support and let us know your account details and we can take a look! Thank you :)

  • Scott


    So I got the Bulletproof buttons to work on Outlook and IPhone. However the buttons on android (Samsung native email client) break. they look like a normal anchor link (blue text with underline) no background colour.

    Any help would be appreciated


  • Carissa Phillips

    Hi Scott,

    Sorry to hear you’re not seeing the button on your Samsung! We’ve had similar reports and found out that Samsung replaced the default Android email client with their own app, and Samsung’s app was to blame.

    If you double-check the icon at the top left and it’s the Android one, please get in touch with support so we can check out your code!

  • Philip N.

    Has anyone noticed that when you reply to/forward an email from Outlook 2007 the button appears twice? (yes we are still on 2007) I am assuming Outlook 2010 would do the same.

    I really think this is great, but anybody have any ideas on how to stop that from happening?

  • Ros Hodgekiss

    Hi Philip, Outlook 2007 does very strange things to everyone’s HTML emails when they’re forwarded. We highly encourage you to make the most of our Forward to a friend links, as that’s the one technique that will allow you to share email campaigns without encountering Outlook-related breakage. I hope this is a good solution for you :)

  • Adam

    Hi all,

    Need some help!

    I’m trying to use the bulletproof background image and bullet proof button within the same table.

    The problem is that the button goes to the top left in outlook 2007, 2010 and 2013

    I think it might be to do with closing mso tags

    Can view test and download code here


    Thanks in advance

  • Adam
  • Andy Winyard

    Hi all,

    This is an absolutely invaluable resource. For those who wish to tile the background vertically in a single table cell (such as behind text) and need the height to be dynamic, you can change the code to the below:

    <td background="http://i.imgur.com/YJOX1PC.png" bgcolor="#7bceeb" width="120" height="92" valign="top">
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:120px;">
    <v:fill type="tile" src="http://i.imgur.com/YJOX1PC.png" color="#7bceeb"/>
    <v:textbox style="mso-fit-shape-to-text: true;" inset="0,0,0,0">

    By removing the fixed height style on the <v:fill/> and adding the ‘style=”mso-fit-shape-to-text: true;”‘ to the <v:textbox> this allows the background to repeat behind dynamic height content.

    Hope this helps others!

  • Red De Guzman

    Hi, does anyone still use these generators nowadays? I just tried it doesn’t work

  • Stig Morten Myre

    Hey Red, sorry to hear you’re having trouble! The generators are still very much in use, so I’d love to see how we can help get it working for you too.

    If you can let me know a bit more about how far you get and what goes wrong, I’ll have a look.

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