Email designers often find themselves needing to use actual text on top of an image. While many bake the text right into the image itself, enlightened designers understand that many email clients block images by default. They need to ensure that, regardless of images being disabled, their message contained in that text will be visible to subscribers.
One solution is to use background images. Background images allow you to display an image with live text on top, splitting the two so that copy is always visible. However, background images aren't supported across all email clients. Furthermore, using background images and background colors introduces a few issues as well. This article will go over some of the problems and solutions of using background images in email.
Background Image Behavior in Email
On the web, you can force certain behaviors on a background image with various declarations—from stretching it to conform to its container to applying grayscale filters. However, with email, only a few of these commands will be respected, and not across all email clients. Understanding how background images behave in email is a valuable tool in any email marketing designer's arsenal.
Right now, there are two things to assume when assigning a background image to a table cell in an email:
- The background image will repeat on both the X and Y axis.
- The background image will align it's left edge to the left edge of it's containing table cell.
Certain modern email clients like Apple Mail and mobile email clients can understand certain css declarations, like center aligning a background image to their container, but these are the exceptions to the rule. Sticking to known behaviors will alleviate a lot of frustration.
Problems with Background Images and Colors
A few years back, it was discovered that adding a background color or image directly to the <body> tag of an email will allow this background property to correctly render in Outlook 07/10/13, as well as a vast majority of other email clients, thus was considered a preferred method.
However, this methodology also yields what I call the 'Black Reply' issue.
Imagine you send an email with a dark, or even pure black background using the <body> tag method. Now, whenever someone wants to reply to that email, or even forward it, the background property will be passed along to the entire message, not just the part you initially sent, giving a dark canvas the person replying or forwarding has to manually change to white.
Understandably, this can cause frustration for users and can result in fewer replies, forwards, and less engagement with your campaigns. Fortunately, there are tools to help make using background images easier and more reliable.
Tools for Using Background Images
Thanks to Stig and Campaign Monitor, a lot of the guesswork of creating reliable background images has been removed with their bulletproof email backgrounds tool. The tool makes building background images effortless, and includes VML code that renders beautifully in Outlook 07/10/13.
It also takes the 'Black Reply' issue into account and allows you to select 'Full Email Background'. When selected, that option wraps the entire message in a single table cell, which eliminates the 'Black Reply' issue.
Further Reading
Bulletproof Background Images Tool
Add a Background Image to your Email in Two Simple Steps
Applying Background Images to your Email Newsletters
Background Images in HTML Email: The Naked Truth
Background Images and CSS in HTML Email