1973 Ltd

Background images in email? Unattainable! Or is it…

Superheros studying background images in email

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.

http://backgrounds.cm/
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:

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:

LaCie-template

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:

CSS:

HTML:

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.

CSS:

HTML:

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

Comments  -  0 Comments

There are no comments yet.

Follow our blog!

Recent Posts

Categories

Our latest tweets

Archives

Authors