Background Images

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. Acorn makes it a breeze to get them working across the board.


HTML/CSS #

With the exception of Outlook and Windows Mail, the majority of email clients support 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 HTML attribute).

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, thanks to background-size: cover :

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 use (and cope with the caveats of) VML, which Outlook's Word rendering engine does support.

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/repeatable images with this technique. The <v:fill> approach can do that, but it doesn't work in Windows Mail. So choose your poison.

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 email body background image to tile, but you can change it to 'frame' if have a large enough image.

Drag and drop editors, such as Campaign Monitors' or MailChimp's, currently don't update the image path and dimensions for the VML code when using their visual editors. Some services, such as Taxi for Email, StampReady or Mailster will do it for you, but with most other email builders you will need to set it in code yourself.

Next Up: Accordion →
ThemeMountain

Current Version