If you are a millennial like me, you probably remember emails to be straightforward with zero design elements.
However, emails have evolved over the years. And many new elements have made their way into marketing emails. One such element to gain relatively fresh importance is background images.
Background images haven't always been part of email marketing campaigns. But so weren't call to action buttons, anchor links, headers, and footers. Today, we can't think of an email without these elements, and background images might soon gain the same relevance.
Background images in emails significantly power up the aesthetics, and captivating your user's attention becomes a walk in the park.
This guide teaches how you can add background images to emails and what value they provide. You’ll also learn about the best design practices that go with them.
What Are Background Images in Email? And What Value Do They Offer?
Complementing the rest of the content, background images in emails appear behind other elements. Unlike usual images in email, background images remain more subtle and give an added glow to other email content.
Background images promote layering, which allows other content to be placed over the image. Using them can help you save time that you spend designing your email. Additionally, one single background image can help you cover all white spaces taking that design challenge off of your mind.
Here's a comparison of emails with and without a background image to make the difference more evident for you:
Know which email clients support background images
Not all email service providers support the use of background images. Therefore, you need to segment your subscribers according to their ESPs to ensure you only send out an email with background images to those who can see it.
Here's a list compiled by Litmus that confirms the ESPs that support background images:
How Can You Add a Background Image to Your Email?
Adding a background image in email is usually done in two different ways depending on the email design tool that you use. While some tools test your coding knowledge and require understanding of HTML basics, others let you do this without using any coding skills.
1. How to add a background image in email using HTML
Using HTML is the most common way background images are added in emails. Here's a basic code snippet that you need to add in the ‘table body’ of your HTML and place it as per your preferences:
Use this code to add a background image to your HTML email. Width set to 100% will help you span your image over the entire table width and “background_image.png” represents the image that you wish to use as background.
You can make this process easier using no-code editors that do not require any coding knowledge.
2. How to add background images in email using Unlayer’s no-code editor
Adding background images in emails through HTML as coding knowledge is not every email designer’s cup of tea. Hence, Unlayer's no-code editor allows you to add a background image in a few clicks.
Here is the four step process to upload a background image to your email without using any coding knowledge:
a. Go to Unlayer's dashboard and create an email template from scratch or select a pre-designed template.
b. Click on the default design block, and a menu will appear on your right. Scroll down the menu to 'row properties,' where you'll see the option to add a background image.
c. Click on the upload image button. Choose an image to upload from your device and it'll show up in your email as background.
After you complete these steps, you can edit and adjust your email background image using the menu on your right.
Adding Email Background Images via HTML vs. Drag and Drop: Which is Better?
The two ways to add background images in email have got email designers divided.
When adding background images with code, you can always edit the HTML snippet based on your HTML knowledge to apply more advanced techniques. You can make your background image switch contrast for dark mode, change the background on cursor rollover, apply a repeating background image, etc.
But this comes at the cost of HTML coding knowledge, making it suitable only for some email designers.
This is where drag and drop or no-code editors like Unlayer come in—making it a matter of a few clicks to add a background image to your email.
A no-code editor will let you play around with your background image even if you have zero coding knowledge or design tool experience. Any marketer, even half asleep, could use that to include a background image in their email and make the required changes to it.
In short, adding background images in emails with no-code editors is more accessible and saves you tons of time when designing emails.
Design Factors That Make Background Images Better
So you look for an image, put it in the background of your email, and you're good to go? We all wish it were that simple. But it's not.
Choosing the right background image in an email is as much a work of art as designing it. You need to consider multiple factors before you finally pick the background image to go with your email.
Keep the image size small for less loading time
Do not confuse this tip for a smaller screen size of the image. Keeping the image size small refers to compressing the image to take up lesser byte space helping with faster loading for your recipients.
Some ESPs compress the image automatically if it exceeds the size limit, eventually compromising the quality of the image. Therefore, we suggest you take the matter of image size into your own hands. For example, you can use a tool like Picsart to improve image resolution using AI. Then you can compress your images using the same program without compromising on quality.
Be mindful of color contrast
The color contrast of your email does not just limit to design elements. You must choose a background image that compliments your brand colors. Irrespective of the background image's appearance, an unpleasant combination of colors will put off any reader. This concept is very similar to the use of background colors in emails.
Consider color fallback (alt text, too)
What happens if your background image does not load for the user? All the other elements of your email should still be readable. You need to ensure you ideate the color of the email content accordingly. Also, remember to add alt text for your background image to show up in case the image doesn't load.
Follow standard design rules
Standard rules for email design refer to readable font size and color, central image placement, and image size that doesn't exceed the browser window size.
Manage image-to-text ratio
What good would be your background image in an email if most of it is covered by text? It would help if you determined an image-to-text ratio to ensure you get the best of both elements. The text should be sized and placed to ensure the impact of the background image remains.
5 Examples of Background Images in Emails That Stand Out
Brands from different industries have been using background images in emails for promotions and more. With these examples, you can get an idea of how great background images can impact your email.
Hulu
Let's start with this example from Hulu announcing the release of a new season for their original series, "The Handmaid's tale." The background image in this email, a cover photo for the new season, just goes on to show the intensity of the series that can help captivate viewers. The CTA is placed right on top of the image leading directly to the streaming link.
Den
Den is working to build pleasing cabins focusing on outdoor aesthetics. And they sure let that know with the background image in this email.
It is almost pleasing how a single background image in an email can show what the brand stands for. The email also uses a white image over the background to prioritize readability.
I am sure you have thought of using emotions at least once in your email design to increase user engagement. Google did that with a background image when they announced their Father's Day offer.
All this example has is one background image, a few lines of copy, and a single CTA button, and yet it fulfills the purpose. You cannot stop thinking about all the time the designer would have saved not having to worry about different design blocks, margins, etc.
Everlane
What better way to launch a limited edition product than putting it in the background of your promotional email? Take notes on how Everlane shows off its classic hoodie in the background of this email. The font size and color of the copy placed on top of the image are carefully selected to maintain readability and keep the product visible enough to impact the user's view.
Musicbed
Musicbed is a platform assisting filmmakers with a roster of music to use with their videos, pictures, etc. They empower musicians to launch their music on their platform, and this email example shows how they market that music.
They used the album cover as the background of the email and complemented it with a CTA that jumps you right to the soundtracks of the new release.
Conclusion
Background images in emails are not only used to save time or to avoid using a template, but with the right ideation, they can outdo any detailed design with multiple elements. Even the biggest brands with cutting-edge marketing campaigns use background images very often.
It all comes down to the need of the hour and your campaign's requirements. Depending on your campaign, using background images can often be your preferred approach to email design.
