MonkeyBrains! The Official MailChimp Blog about email marketing and monkeys

Monkey Brains   WWW

« Forward-to-friend Forms: Can I save the friends' emails? | Main | Ruby on Rails integration with MailChimp »

Background Images in HTML email

One of our customers recently designed a really nice email campaign that had a blue background, with white "title" text on top.

Here's a snippet of their design in Gmail:

Ex_imageson

Beautiful.

Even works in Outlook 2007:

Ex_imagesoutlook2007

But here it is in AOL 9:

Ex_imagesbroken

Here's what went wrong...

For the title (MAKEUP LOOK OF THE WEEK!), they used an image composed of white text, and a transparent background. Besides the problem of "images turned off by default," this is risky because it depends on a dark background actually working, and showing through. And in HTML email, you can't really depend on anything working properly.

For the blue background, they used a tiling background file. Background images don't always work in HTML email. Furthermore, they specified the background image in their embedded CSS:

#content { background: url("images/email_bg.jpg") bottom left repeat-x; }

Embedded CSS is not very trustworthy anymore, especially in webmail clients (inline CSS is safest now).

To make matters worse, the url they used for the background image didn't use an absolute path, pointing to the file on their server.

Instead of:

url("images/email_bg.jpg")

It should've been:

url("http://www.myserver.com/images/email_bg.jpg")

So even if the embedded CSS worked, the image still wouldn't have been downloaded.

Fortunately, they designed the email to degrade gracefully, by assigning a solid blue bgcolor to their table:

<table id="content" bgcolor="#79C0F6" cellpadding="0" cellspacing="0" border="0">

Unfortunately, AOL 9 didn't accept the blue bgcolor, because the CSS (id=content), with the broken image path, appears to be overriding it.

By the way, same thing broke in Mail.com, Hotmail, Comcast, Outlook 2003, Outlook Express, Yahoo, Thunderbird, and on and on. In fact, according to their Inbox Inspector report, the blue bgcolor only worked in Gmail, Outlook 2007, and---get this---Lotus Notes.

We re-ran the report after fixing the absolute path, and it rendered properly in all the email programs. If the background-image wasn't accepted (as with Outlook 2007), the bgcolor was properly swapped out.

May 14, 2007 in Email Design | Permalink

TrackBack

TrackBack URL for this entry:
http://www.typepad.com/services/trackback/6a00d8341d5a5053ef00d8353704d369e2

Listed below are links to weblogs that reference Background Images in HTML email:

Comments

The comments to this entry are closed.

 
MonkeyBrains! is the official MailChimp Blog. MailChimp is a product of The Rocket Science Group.