Did you know that background images were not recommanded to use in HTML email?

What is a background image?

A background image can be inserted with the background attribute:
background=”http://www.mywebsite.com/myimage.jpg”

Or in css, with the style attribute the background-image property:
style=”background-image:url(http://www.mywebsite.com/myimage.jpg);”

Both methods can be applied to a td element, for example, to generate an image that will be displayed behind the text (as a wallpaper for example). The text is still selectable and editable.

So, what’s the issue?

There is a problem with background images on Microsoft Outlook. Since the 2007 version of their software, background images are no longer supported, thus not displayed at all. Same for versions 2010, 2013 and even Outlook.com (the online equivalent).

Why?

Between versions 2003 and 2007, Microsoft has “updated” the rendering engine for displaying HTML. Rather than using the Internet Explorer base, the decision was made to build on the one that was used by Microsoft Word. Without being negative, this engine is much more limited in terms of support for different visual features of HTML / CSS.

* For an overview of features supported on each email software or service, see the excellent Campaign Monitor guide.

Conclusion: is there any solution?

Yes, but no. There is a way to apply background images with VML (Vector Markup Language, a language similar to XML used by Microsoft Word, among others). However, this method is complicated when it comes to use multiple background images, does not allow as much flexibility as with the CSS or HTML methods and even tends to make Outlook crash. Knowing this, it is often easier to avoid background images.

If you still wish to use it for software that can support it, use a similar background color behind the image so the text is still visible even if the image is not shown.

Demonstration:

HTML emails

The other option is to create an image with the text embedded into it. Note however that it is a bad practice to use only images in your mailings.