Background images not working in Outlook 2007 and later

Question

I made an HTML Email Template that is working fine in most email readers, but the background images are not showing in Outlook 2007, 2010, and 2013. How can I solve the prob

Answer 1

Email-reader support for background images

Outlook 2007 and later only supports 2 ways to display a bg image:

• Using the HTML background attribute on the body tag
• Using the inline background-image style on the body tag

In both cases, Outlook scales the image differently than other email readers, and there's no way to prevent the bg image from tiling.

So for all practical purposes, background images aren't an option for supporting a wide range of email readers. Instead, you'll need to make do with foreground images (img tags).

Overlaying elements is not an option

Outlook 2007+, Gmail, Hotmail, and Yahoo Mail don't support CSS positioning. As a result, there's no way to place a text element on top of a foreground image.

When slicing up the email into different areas (typically using HTML tables), each area can either be a text element or a foreground image. But you can't have both in the same area (i.e., you can't have two elements occupying the same space or overlapping).

Solutions

For areas where there's an image with no text on top of it, that part of the email can be cut as a separate foreground image.

For areas where there's an image with text on top of it, there are 3 options:

1. Cut the text as part of the image. This hurts the usability of the email, and it's especially problematic for users who have images disabled by default (as they won't initially see the text).
2. Display the image as a background image, with the understanding that users of Outlook 2007+ will not see the image (graceful degradation).
3. Do not attempt to display the background image in any email reader.

In moderation, option #1 is usually safe and reasonable. But when used heavily, it leads to a very high ratio of images to text in the email, which may trigger some spam filters. Before making heavy use of option #1, test the email in a variety of spam filters.

Before proceeding with options #2 or #3, you may need to clear it with the designers (as either one compromises the design in Outlook 2007+). In the bigger picture, background images should be used sparingly when designing emails. It may be helpful to point out to the designers the impact of using background images.