Adding bulletproof background images and buttons to your email newsletters

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!

Posted by Ros Hodgekiss

50 Comments

  • DRoss
    19th January

    Sweeeet!

  • David Padilla
    19th January

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

  • DRoss
    19th January

    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
    19th January

    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
    20th January

    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
    22nd January

    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
    22nd January

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

  • Alex
    22nd January

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

  • Julian Wellings
    22nd January

    @Alex - thanks, just posted.
    https://www.campaignmonitor.com/forums/topic/7330/alex-ilhan-coding-question-ref-stigs-email-button/

  • Stig Morten Myre
    22nd January

    @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
    24th January

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

  • Nick
    24th January

    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
    25th January

    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
    25th January

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

  • Stig Morten Myre
    28th January

    @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
    4th February

    Amazing Stig! Testing this now. So excited.

  • Blitz
    5th February

    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
    5th February

    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 .(JavaScript must be enabled to view this email address), and we’ll check it out.

  • Courtney Duvendack
    13th February

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

    Really excited to try and use this!

  • Ros Hodgekiss
    13th February

    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
    22nd February

    I love Stig!

  • Dave Cross
    22nd February

    way to go, Stig!

  • Alex
    22nd February

    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
    23rd February

    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
    23rd February

    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
    6th March

    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;”>
    <tr>
      <!—[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>
      </font>
      </td>
      <!—[if mso]><td height=“40” width=“10”></td><![endif]—>
    </tr>
    </table>

    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
    8th March

    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
    8th March

    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
    11th March

    Stig is awesome!

  • Anthony G
    20th March

    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
    20th March

    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
    1st April

    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
    2nd April

    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
    12th April

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

  • Rob
    18th April

    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
    18th April

    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
    9th July

    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=“http://emailbtn.net/”  arcsize=“10%” strokecolor=”#1e3650” fill=“t”>
      <v:fill type=“tile” src=“http://i.imgur.com/0xPEf.gif” color=”#556270” >
      <w:anchorlock>
      <center >Pretty Button</center>
      </v:roundrect>
    <![endif]—><![if !mso]>Pretty Button<![endif]></div>

  • Ros Hodgekiss
    9th July

    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
    25th July

    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:

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html>
    <head></head>
    <body 0; padding: 0;”>

    <div >
      <!—[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” color=”#ffffff”>
      </v:background>
      <![endif]—>
      <table height=“100%” width=“100%” cellpadding=“0” cellspacing=“0” border=“0”>
      <tr>
        <td valign=“top” align=“left” background=“http://webtgdh.co.uk/home/sites/webtgdh.co.uk/public_html/images/signature.gif”>

    Any help would be greatly appreciated!!!

    Thanks,

    Deb

  • Debbie
    25th July

    //<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html>
    <head></head>
    <body 0; padding: 0;”>

    <div >
      <!—[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” color=”#ffffff”>
      </v:background>
      <![endif]—>
      <table height=“100%” width=“100%” cellpadding=“0” cellspacing=“0” border=“0”>
      <tr>
        <td valign=“top” align=“left” background=“http://webtgdh.co.uk/home/sites/webtgdh.co.uk/public_html/images/signature.gif”>

  • Debbie
    25th July

    Aargh how do I add code?

  • Debbie
    25th July

    <div >
      <!—[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” color=”#ffffff”>
      </v:background>
      <![endif]—>
      <table height=“100%” width=“100%” cellpadding=“0” cellspacing=“0” border=“0”>
      <tr>
        <td valign=“top” align=“left” background=“http://webtgdh.co.uk/home/sites/webtgdh.co.uk/public_html/images/signature.gif”>

  • Debbie
    25th July

    Sorry I see it’s all on there now.

  • Debbie Robinson
    25th July

    Not my images, the code above.

  • Ros Hodgekiss
    26th July

    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
    24th August

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

  • Richard Bland
    10th December

    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
    11th December

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

    Let us know how you go :)

  • Jade Francis
    3rd March

    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
    4th March

    Hi Jade, this is a curious one - my first suggestion is to add table, td { border-collapse: collapse; } 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!

Got something to add?

Sign up for free.
Then send campaigns for as little as $9/month

Create an account