Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps
Emails can seem a bit predictable with an image here and a block of text there. One way to improve the subscriber experience? Wallpapers! They add another dimension to your design and make your emails “pop.” When done well, your emails feel like a million bucks.
Read on for:
What are wallpapers? (And what's the point?)
Wallpapers are images applied to the background or behind an element.
The main advantage of using background images is that they allow you to place additional HTML content on top of them. Unlike other images, where only the image itself can exist in that area, background images offer overlay capabilities so you can have additional images, text, or calls-to-action (CTAs) present in the same area.
Plus by using live HTML text on top a background image (as opposed to a flattened image with text already on it) will make your message readable if Images are turned offThis makes this a great technique to create better and more Accessible HTML emails.
Background images not only help create campaigns that provide a better reading experience, but they also provide numerous design options to help you differentiate your campaign from the competition.
5 creative examples of brands using background images
Miro placed a background image with shapes behind the hero section, drawing attention to the email's main headline and message, overlaid with live text.
Source: Really good emails
Upler used a background image to highlight a discount on their services, placing a coupon image behind a coupon code.
Source: Really Good Emails
Figma added a subtle repeating background pattern to the text of this email, introducing us to their new whiteboard product. The pattern they have reflects the background of the product.
View this email in Litmus Builder
Chipotle placed a huge background image behind this huge hero and body area, including product photography and a line pattern. At the top of this picture they have one Animated GIF with transparent background and live text in the text area.
Source: Really Good Emails
Animated GIFs can also be used as background images, like this example from Adobe Stock, to promote festive collections with hero content like live text and a CTA button placed over the animated background.
Source: Really Good Emails
Design considerations
When thinking about implementing background images, there are a few design considerations to keep in mind.
contrast
To ensure All readers benefit from the overlaid content with background images, it is important to pay attention to contrasts. Treat the image similarly to a flat color and test the colors in your image against the colors of your content.
When designing with Figma, you can add plugins like Color Blind and Contrast to see if you're following the Web Content Accessibility Guidelines (WCAG). There are also a number of web apps, such as WebAim's Contrast Checker, that you can use to test the colors in your designs.
simplicity
Another way to ensure readability is to keep things simple. Busy backgrounds can make it difficult to see the value of the live text you place on your image. Therefore, it's often helpful to think of your wallpaper as an improvement rather than a feature.
Solid color fallback
Like not all Email clients takes background images into account and designs a solid color replacement. Subscribers using email clients that don't support your images can still have a great experience with solid colors. Be sure to choose a replacement color that fits your design and contrasts well with the foreground elements.
How to encode background images in emails
Before I go through the code, let's see which clients render the CSS style in the background and which need the help of a VML fallback.
The good news: Over the years, support for inline background CSS has improved, eliminating the need for a background HTML attribute as webmail clients now fully support this method.
The bad news: Unfortunately, wallpapers for Windows 10 and Windows 11 Mail don't work well. Inline CSS or the deprecated HTML background attribute will not render, and applying VML will result in rendering issues with an “Image cannot be displayed” error message.
But no fear! If you're concerned about the experience your Windows 10 and Windows 11 mail subscribers are having, you have several options.
Option 1: Consider omitting VML
Omit VML and set a replacement background color to ensure you give your Microsoft Outlook Suite audience a great email reading experience without additional decoration. As VML, this is our preferred method at Litmus can lead to accessibility errors. If you want the image to display, try hiding the background version for your Outlook viewers and replacing it with a static image. Just make sure you include ALT text.
If you absolutely must 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. (Greetings to Matthew Solente for sharing this with us! He even created one MSO Faux Absolute Generator for Outlook). note: This only works if you have a set width for a table. It won't work if you try to stretch something across the entire email.
One thing about this route, however, is that it is… challenging. But if you have a large Windows 11 audience, the win could be worth it. Remember to set a fallback to a traditional background image or a static image Test your emails when you go.
Here is an example:
Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps