Email Background Images: How to Wow Subscribers (+ Code)

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’re unexpected and add another dimension to your design, making your emails “pop.” When done well, they make your email feel like a million bucks but are incredibly easy to pull off.

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. Instead of being a main focal point of the email, like a hero image, they are more often subtle and complementary to the other content in the campaign.

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.

example of live HTML text and a bulletproof button over a background image

Using live HTML text on top of a background image, instead of including that text as part of the image, means 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.

Creative ways brands are 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.

Miro email with background image
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.

Uplers email background image for 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.

Figma background image in email
View this email in Litmus Builder

Chipotle placed a jumbo background image behind this impactful jumbo 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.

Chipotle Friendsgiving email with subtle background image
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.

Adobe Stock email with animated GIF background image
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 honour 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: Support for inline background CSS has improved, with webmail clients now fully supporting this method, meaning the background HTML attribute is no longer required.

The bad news: Unfortunately, Windows 10 Mail just doesn’t like background images. 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.

Email client support for background images

Email client Using inline CSS Using VML
Apple Mail 14
Office 365 (Mac)
Office 365 (Windows)
Outlook 2016 (macOS 10.12.6)
Outlook 2013, 2016, 2019 (Windows 10)
Windows 10 Mail
Gmail App (Android 10)
Gmail App (iOS 13.4.1)
Outlook (Android 7.0)
Outlook (iOS 12.0)
Samsung Mail (Android 7.0)
iPad 11 Air (Gen 4 iOS 14.2)
iPhone 12 (iOS 14.2)
AOL Mail (Edge)
Gmail (Chrome)
Office 365
Outlook.com
Yahoo! Mail

 

Which email clients do your subscribers use?

Take a look at your own email client market share with Litmus Email Analytics. See which email clients you need to optimize your background images for. (Hint: If Windows 10 Mail is low, don’t sweat it.)

Learn more →

Now that we’ve got that out of the way, let’s talk code!

One of the fun things about bringing background imagery into your emails is that there are a few different ways you can achieve this. You can fill a small section or cover the body of your email, use a single image or a repeat pattern, and you can switch your background imagery depending on whether your reader is on desktop, mobile, Light Mode, Dark Mode, or even when they hover or roll over your image.

Each technique needs a different approach, so let’s take a look at the best ways to code these.

Width-defined or fixed background image

fixed-width background

When applying background images, it’s always best to add your code to the cell of the containing table. Applying to any other HTML element such as <table> or <body> is unlikely to get support from some email clients. Here’s what this should look like:


Blog – Litmus

Source link

Scroll Up