May 14, 2007

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:



Even works in Outlook 2007:


But here it is in AOL 9:


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:


It should’ve been:


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, 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.