Emails can feel a bit predictable with an image here, a block of text there. One way to liven up the subscriber experience? Background images! They add another dimension to your design, making your emails “pop.” When done well, they make your email feel like a million bucks.
Keep reading for:
What are background images? (And what’s the point?)
Background images are images that are applied to the background of, or behind, an element.
The major benefit of using background images is they allow you to place additional HTML content on top of them. Unlike other images, where only the image itself can exist in that space, background images provide layering possibilities, so you can have extra images, text, or calls-to-action (CTAs) existing within that same space.
Plus, by using live HTML text on top of a background image, (versus a flattened image with text already on it), your message is readable when images are turned off, making this a great technique for creating better, more accessible HTML emails.
Aside from helping to create campaigns that provide a better reading experience, background images also offer a wealth of design possibilities, setting your campaign apart from the competition.
5 creative examples of brands using background images
Miro placed a background image containing shapes behind their hero section, drawing attention to the email’s main headline and messaging, which is overlaid using live text.
Source: Really Good Emails
Uplers used a background image to highlight a discount on their services, with a coupon image placed behind a coupon code.
Source: Really Good Emails
Figma added a subtle repeating background pattern to the body of this email, introducing us to their new whiteboard product. The pattern they feature echoes the background found in the product.
View this email in Litmus Builder
Chipotle placed a jumbo background image behind this giant hero and body area, including product photography and a line pattern. Over the top of this image, they have an animated GIF with transparent background, and live text in the body area.
Source: Really Good Emails
Animated GIFs can also be used as background images, like this example from Adobe Stock, promoting festive collections with hero content including live text and a CTA button placed on top of the animated background.
Source: Really Good Emails
Design considerations
When thinking about implementing background imagery, there are some design considerations worth taking into account.
Contrast
To ensure all readers get the value of content overlaid on background imagery, it’s important to be mindful of contrasts. Treat the image in much the same way as you would a flat color, and test the colors in your image against the colors of your content.
If you design using Figma, you can add plugins like Color Blind and Contrast to see whether you are meeting Web Content Accessibility Guidelines (WCAG). There are also a number of web apps, like WebAim’s Contrast Checker, where you can test the colors in your designs.
Simplicity
Another way to ensure readability is to keep things simple. Busy backgrounds can make it hard to get the value of any live text you place on your image. So it’s often helpful to consider your background image as an enhancement rather than a feature.
Solid color fallback
As not all email clients will honor background imagery, design a solid color fallback. Subscribers using email clients that won’t support your imagery can still have a great experience with a solid color. Be sure to choose a fallback color that matches your design and contrasts well with its foreground elements.
How to code background images in email
Before I walk through the code, let’s see which clients will render background CSS styling and which ones need the help of a VML fallback.
The good news: over the years, support for inline background CSS has improved, so background HTML attribute is no longer required aswebmail clients now fully support this method.
The bad news: Unfortunately, background images don’t work well for Windows 10 and Windows 11 Mail. It won’t render inline CSS or the deprecated HTML background attribute, and applying VML will cause rendering issues with an ‘image can’t be displayed’ error message.
But fear not! If you are concerned about the experience your Windows 10 and Windows 11 Mail subscribers are getting, you have a few options.
Option 1: Consider leaving out VML
Leave out the VML and set a fallback background color to ensure you’re giving your Microsoft Outlook Suite audience a great email reading experience, without the extra decoration. This is our preferred method at Litmus as VML can cause accessibility errors. If you need the image to show up, try hiding the background version for your Outlook viewers and replacing it with a static image. Just make sure to include ALT text.
If you absolutely need to use a background image, you can opt for workaround number two…
Option 2: Use absolute positioning in Outlook
Since Outlook doesn’t support background images very well, use absolute positioning to position your content over an image in Outlook. (Shoutout to Matthieu Solente for sharing this with us! He even created a mso faux absolute generator for Outlook). Note: this only works if you’ve got a set width on a table; it won’t work if you try to stretch something across the whole email.
One thing about this route, though, is that it is… finicky. But if you’ve got a sizeable Windows 11 audience, the payoff could be worth it. Just remember to set a fallback to a traditional background image or static image and test your emails as you go.
Here’s an example:
.webp "14 critical elements I think every website homepage should have")
-1.webp "Level up your content marketing funnel — here’s how I make the right content for each stage")
