Background Images in Email

Dec 6, 2006 · 2 minute read

Whatever you might think about image rich emails you have to admit clients are a fan, and sometimes needs must.

The web, as always, comes to the rescue and their are a few good articles around – many of them over on campaignmonitor.com including a set of Email Design Guidelines for 2006, Optimizing CSS presentation in HTML emails and the excellent A Guide to CSS Support in Email

A List Apart also has an older article and their is some good infmation over on xavierfrenette.com about the support in web mail clients.

Another little bit of useful info I thought worth posting, after a quick conversation with a colleague, concerns the use of background images in emails.

Assuming your going down the inline styles route you might want to have something like this:

<div style="background: url(image.jpg) top left no-repeat; width: 500px;"></div>;

But this just doesn’t work. The image doesn’t appear when the email is sent. A quick fix is to include the image inline, but hide it as much as possible with a height and width of 1px and a style of display: none.

<img src="image.jpg" width="1px" height="1px" style="display: none;"/>

This throws up one of those interesting annoyances in Outlook. If you’re sending the email using Outlook the image appears twice in the editing pane, hence the 1px trick as well as the style display: none. When it’s received the style rule gets applied.

This assumes you are sending the images along with the email, rather than simply linking to them online were you dont have this problem – but do have a host of other issues with blocked images and the like.

I haven’t admittedly tested this extensively, however I’ve had a lot of luck with Outlook, which for business to business emails accouts for something like 75% of the audience according to Campaign Monitor (and probably around what I’d expect based on my experience).