Background images in email? Unattainable! Or is it…

HTML for email, for so long compared to one of your old relatives who can’t understand the buzz about the latest iPhone and talks about ‘the good old days’ when the Nokia 3310 was the hip thing to have, is kicking and screaming it’s way into the 21st century thanks to the rise of mobile device usage and its up-to-date coding languages (media queries, CSS3, etc.).

No longer are people confined to using plain colours, square shaped buttons and generic text styles when designing their email templates and are instead able to explore the possibility of incorporating their vision of design into emails. However for every advancement of email, for every beautiful email that lands in our inboxes, there’s always that one email client whose old age back-end coding and old school ideals keeps HTML for email from matching up to it’s older yet more streamlined brother HTML for web.

Take the example of background images. A design technique that is utilised wonderfully in the world of web is a no-go in email thanks to Outlook 07/10/13 not supporting it. Some people would say to ignore these clients and place background images in your email but for most companies whose client base still regularly use Outlook that’s not a possibility. However thanks to the guys over at Campaign Monitor and the emergence of VML (Vector Markup Language) coding, this headache may be a thing of the past. Following their easy to use tool you’re able to produce the code needed to get your background images displaying in Outlook 07/10/13.

Campaign Monitor's background images tool

Below is an example of how the VML code looks in a template I created for LaCie and how it appears in Outlook 2010:

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:256px;">
<v:fill type="tile" src="images/hero-banner_02.jpg" color="#000000" />
<v:textbox inset="0,0,0,0">

<table width="315" border="0" cellspacing="0" cellpadding="0" class="w-250">

Content goes here

<!--[if gte mso 9]>

The coding is contained inside of MSO tags, which activate the coding when the email is viewed within Outlook 2000 and up. The VML code itself is pretty self explanatory and tells the email client to display a background image with a width of 600px, a height of 256px, to be tiled rather than stretched and to use white as a fall back colour. The result can be seen below:


Looks great don’t you think?

Whilst the background image looks good on the desktop version of the email I wanted to make sure it looked good on the mobile version as well because all us email geeks know that’s just as important. By nature the background image will still apply on the mobile version and that’s great but what if we want to change the design for mobile so that the text doesn’t have the background image applied. Well that can be achieved with some CSS, a div and a replacer image:


div[class="show-image"] { max-height: 210px !important; max-width: 320px !important; display: block !important; margin: 0 auto !important}
div[class="show-image"] img { height: 210px !important; width: 320px !important; display: block !important; margin: 0 auto !important}


<div class="show-image">
<img src="images/hero-banner-mobile.jpg" width="0" height="0" alt="Thank you for visiting LaCie at AVID Connect" style="display:block" class="show-image" />

As you can see the replacer image is coded to not show on the desktop version but thanks to the availability of CSS in mobile email clients we can add width and height properties to the image to get it displaying correctly.

To remove the background image it’s just a simple case of applying a no background image class to the table.


table[class="w-250"] { width:250px !important; margin: 0 auto !important; color: #676767 !important; background-image: none !important}


<table width="315" border="0" cellspacing="0" cellpadding="0" class="w-250">

Something to note on your quest for background images is that the coding generated from the website can look complicated at first so I suggest testing the email a few times with the VML code added just to be sure it’s working as intended (as we all know Outlook can be temperamental at the best of times). Once you’ve got a good idea of how the code works with your templates there shouldn’t be any problems using background images for future email templates.

So what are you waiting for? Go ahead and starting ramping up those email designs and adding in those background images because the email world is becoming more and more modern, one workaround at a time.

EDIT: In the months following this post we’ve been discovering more about background images. You can read more about it here