Background images that work everywhere, including Outlook

Background images are a hard thing to get right in emails, mainly because of Microsoft's Word-based rendering engine for Outlook and Windows 10 Mail, which does not support CSS background images. Pine makes it a breeze to get them working across the board.


CSS Background Images

With the exception of Outlook and Windows Mail, the majority of email clients supports CSS background images. In addition to this inline style, we also include the background="" attribute, for Lotus Notes and a couple international clients (of course, if you don't need to support the latter ones, you can remove this).

We simply add these on the Column cell inside the row table:

Make sure you also specify a fallback background colour that constrasts well with your text, in case the image doesn't load for some reason. Simply add the bgcolor="" attribute on the column cell, as shown above.

We can take it a step further and even use retina background images in email, with background-size: cover. Keep in mind that Outlook 2000-2003 doesn't support this, so you can't have retina background images for those versions.

In a perfect world, that's all there is to it. In the real world though, there is also...

Microsoft Outlook

Since 2007, Outlook does not support CSS or HTML background images. The same applies to Windows 10 Mail. Instead, we need to learn (and cope with the caveats of) VML, which Outlook's Word rendering engine uses.

Immediately inside the cell to which we applied the HTML/CSS background image, we add an Outlook-specific HTML comment that contains the necessary VML code. As you can see, the tags of this code are closed in a separate comment block, which allows us to add our content in between:

Caveats

This VML code enables background images even in Windows 10 Mail, through the use of the <v:image> tag instead of the traditional <v:fill>. However, it does come at a cost:

  • The height you set in the VML will be the exact height of your table cell in Outlook, no matter if the content is higher.
  • You cannot have tiled or repeatable images with this technique. The <v:fill> approach can do that, but it doesn't work in Windows Mail. Choose your poison.

VML Body Background Images for Outlook

Add the VML code right after <td> of the Wrapper table (or, just before the container table), and remove bgcolor="" attribute on the Wrapper. It will add a background image to the entire email, in Outlook. Of course, you can mix it with the HTML/CSS background like we did, for the rest of the email clients. However, do note that this will not work in Windows Mail:

The code above sets the VML email body background image to tile, but you can change it to type="frame" if have a large enough image.