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.
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!
19th January
Sweeeet!
19th January
I can’t wait to test it. Thank you for sharing this. Imagine the possibilities!
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.
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.
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.
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?
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?
22nd January
@Julian Wellings: Make a topic on the forum with your code and I’ll take a look, if you like.
22nd January
@Alex - thanks, just posted.
https://www.campaignmonitor.com/forums/topic/7330/alex-ilhan-coding-question-ref-stigs-email-button/
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.
24th January
Wow, Stig! Amazing work. This is a fantastic resource and will be one of the most used assets in my toolbox!
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?
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.
25th January
When I click the button in Outlook 2010, the rectangle turns an inverse color. Any way to work around this?
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.
4th February
Amazing Stig! Testing this now. So excited.
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.
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.
13th February
The sites don’t seem to be working for me, are they done?
Really excited to try and use this!
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.
22nd February
I love Stig!
22nd February
way to go, Stig!
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?
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?
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 :)
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.
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.
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
11th March
Stig is awesome!
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?
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 :)
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.
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 :)
12th April
Do you have any examples of emails and code for us to see it in action?
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.
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 :)