Fun with Background Images


DeepSeaworks2_spots470

This week I’ve mostly been trying to get one dark background image to render behind the message copy, which is white; on Outlook and the big three consumer ISPs: Gmail, Hotmail, Yahoo.

Those of you who know, know…

Each inbox has it’s own preferences about what it will render and how it wants you to code it; background images are one of the more complex. Here’s why:

body color body image table color table image
Outlook Y Y Y N (vml*)
Gmail Y (inline**) Y (inline**) Y Y
Hotmail N N Y Y
Yahoo N N Y Y

 

*Outlook does not support background images on tables or tds, however there is a workaround using VML, this technique is known as “bullet proof backgrounds”.
**Gmail will obey styling of the body tag but the code must be added to the body tag directly because it converts body tags into a div tag but will leave the rest of the contents of the tag in place.

You might ask why there are no mobile clients in there, it’s because if I get these right, the others will work too … or will they? answers on a postcard.
Note: Call the background color before the image in all tags, otherwise the color will be rendered last which will put it on top of the image and you won’t see the image.

 

Essentially Outlook wants the image and fall back color added to the body, style tag will work. Gmail needs it inline to the body or on a 100% wrapping table. Yahoo and Hotmail won’t render body styling so you have to add it to the wrapper table.

The complication is that while Outlook won’t render the table image it will render the table background color, so where you have added a background color to the table for when Yahoo and Hotmail block the images, Outlook will not show that image at all but will show the colour and that will be in front of the image on the body.

If I leave the color out of the table Yahoo and Hotmail will look terrible because the copy is white so won’t be readable on the white background.

What do you do?

One answer is to use a bullet proof background, this is Outlook specific code called VML to make Outlook render the image. There is a free little tool to automatically make the code on Campaign Monitor’s site.

This would work in most scenarios, however on this occasion, my customer had an antiquated system which cannot handle the VML code. On top of that I prefer to only go down this route as a last resort.

Instead I just used the [if mso] trick!

Initially I had to code in the background colour and images in the following places:

  • To the body tag in CSS in a style tag inside the body tag
  • To the id of the wrapper table in the style tag
  • Inline on the bodytag as an html attribute and in CSS
  • Inline on the wrapping table as an html attribute and in CSS

This will work everywhere except Outlook where the table background colour will show in front of the body background image.

Then I simply add an [if mso] comment block underneath the style tag. This block will include another style tag which also refers to the wrapping table and makes the background color transparent, ie:

<!--[if mso]>
<style type="text/css">
#backgroundTable {background-color:transparent !important;}
</style>
<![endif]-->

This essentially turns off the background coloring on the wrapping table but only in Outlook and all is well in the world.

One thing I have not spent the time to test is the number of times I’ve coded the background image. I’m fairly sure that using html attributes and using inline css is a bit overkill, however I’m not sure if one engine prefers inline and another prefers html or either either will work and I just need to pick one. Hopefully inline css is the winner; if you know, let me know!

If only there was an easier way – if you know, let me know…