Many email marketers shy away from using a background image because they’re not quite sure how to make them work for their email campaigns.
The right background can transform your newsletter to look like a page from a magazine, while the wrong background might give it an instant 90s makeover, which you probably don’t want in 2020.
How do you pick a background that works for your newsletter?
Join us as we talk about how to use background images in your emails—both in general and technically within MailerLite. You’ll also learn best practices and see examples of great email designs that use a background image.
I’m sure you know what background images are but do you know how they technically work? That requires some more explanation.
In emails, it’s an image that is placed in the background element within the code. Because it’s in the background, new blocks can be layered on top (such as text, video, buttons, etc). This makes email backgrounds so exciting, as they can give you an entirely new way to design your newsletters.
Email tools, like MailerLite, can add background images automatically. You simply need to upload the jpg, png or GIF background image you’d like to use.
We’ll also briefly talk about coding a background image in an HTML newsletter for those of you who prefer to code yourselves.
Did you know? In MailerLite, you can add a background image for the entire layout (left) and background images for separate elements (right), like text blocks.
You can see the difference below. Comcast uses a background image, while photographer Kanacia James uses a text block with a background image and text layered on top.
Oftentimes you’ll see emails that are made up using one big image. This can be problematic. If that image doesn’t load in the email client, your newsletter will be empty. You can avoid this by using a background image.
Background images have the power to:
There are different ways to use backgrounds (lots of newsletter examples coming below). A rule of thumb is to pick an image that complements the other design elements. Remember that your text and CTA should steal the limelight, not the background.
From a technical standpoint, we prefer using backgrounds over uploading an image with text. It’s hard to guarantee that every single email client shows your images, as some aren’t compatible or the reader has blocked images. When a background image fails to load, the text elements you’ve layered on top will still be visible.
In the example below, the text is layered on top of a background image that makes the design look like an illustrated book page. Even without the background, people will understand what the newsletter is about.
As with images in general, some email clients make it technically impossible to show them correctly (due to CSS property issues). When we ran our Litmus background email check, we saw the following results:
An important thing to take into account when adding background images is the file size. The larger your email, the more data it takes from the reader and the bigger the chance your email won’t be fully shown. We recommend keeping each image at a maximum of 1 MB. As for width, we advice 640 pixels when used for elements and 1200 pixels for full-width.
As screen sizes vary a lot, it's difficult to guarantee the correct display across all screens, therefore it's best to choose a design that looks nice when tiled as well. You can use the in-built image editor to resize your images within MailerLite.
Especially when your background image is part of your email layout, the image should resize along with the rest of the newsletter blocks when the screen size changes. When you insert an email background with MailerLite, your images are always responsive.
Tip: You can preview what your newsletter will look like in MailerLite. Click here to read more about responsive email design.
Make sure to use a background color and insert an ALT text as a backup. The background color can be whatever fits your design (pick a neutral color like light-grey when in doubt).
Tip: Read more about how to use colors in your marketing emails.
The ALT text is descriptive, like “background image of clouds”. It helps people understand what the image is about when they can’t see it.
Tip: We recommend adding ALT text for each image in your MailerLite newsletter, here’s how.
The key to background images is to use them so they emphasize other email content elements and make your newsletter look even better. In practice, this often means your background is simple but with a twist, like a pattern, gradient and animated GIF. Unless you want to go all-in!
Below we’ll show you different ways to use email backgrounds to give your design a unique look.
This webinar invitation by Mintel perfectly shows how a background image can totally transform the look of your newsletter. Imagine the same invitation without the background. Kind of boring, right?
Subject: [WEBINAR] Discover the 2030 Global Beauty & Personal Care Trends
Another example comes from photography collective and commerce Moment. They added a background to a text block, which is also possible in MailerLite.
When you use an image as the background, be sure to make the font contrasting and large enough so the text is easy to read. Moment kept the word count short and made the font huge.
Subject: Tips for Photographing Peaceful Protests
Independent Mary Kay consultant and MailerLite customer Lisa Prescott switches up her newsletters depending on the season. For this one, she used a grey fallback background color and uploaded a background painting of pine trees. The pastel-pink portrays warmth and fits perfectly with her brand.
From: Lisa Prescott
Subject: Are you ready to look SLAMMIN at your HOLIDAY EVENTS?
The same can be seen in this newsletter by customer Clean Creations. This Mother’s Day newsletter radiates spring vibes due to the flower imagery chosen for the newsletter background.
From: Clean Creations
Subject: Need Mother's Day Gift Ideas?!
Customer Jetsetter Vintage makes a big, bold statement with this newsletter. The artsy background and the GIF header image work surprisingly well together, as they share the same color palette.
From: Jetsetter Vintage
Subject: Vintage graphics like you never seen before
Our customer, an art shop and design studio named 83 oranges, opted for a tiles-pattern that instantly makes the newsletter look like a page out of a decoration magazine. The background makes the overall newsletter more elegant and interesting.
From: 83 oranges
Subject: Get Ahead on Gifting 🌲 + Latest from Our Identity Design Studio
Do you want to design newsletters like the one above? Our ultimate guide to newsletter design teaches the skills you need.
This newsletter by customer and romance author Lark Avery shows you how to use color blocking in your newsletter design. The 3 different colors make a simple text-based newsletter a lot more aesthetically interesting.
From: Lark Avery
Subject: Recommended reads! Lark news & a contest
When your design is mainly white or another neutral color, an animated GIF in your email can help add excitement.
Our customer See Mom Click used an animated GIF of fireworks as an email background. Because the fireworks come and go, the otherwise neutral layout feels more alive.
From: See Mom Click
Subject: 11 Black Friday Deals to Kick Off Your Holiday Shopping 🛍️
One glance and you already know what social channel this newsletter is about.
You’re right, Instagram! Customer Zteep Tea used a gradient background with the same color scheme. Colors that gradually change keep the reader engaged as they scroll down.
Subject: IG LIVE Tonight: How to Make Tea Lattes
This email by our customer Narrow Bridge Candles shows that a subtle pattern can really make a difference in your newsletter design. Instead of using a simple grey color as the background, they opted for a wooden motive that gives just that bit of extra flair.
From: Narrow Bridge Candles
Subject: 😍 Do you still want to receive e-mails from Narrow Bridge Candles? 🌿
If your newsletter promotes alien books, you want to get a little spacey with the background design.
Our customer, author Ravyn Wilde, takes her readers to another dimension by using the background image below. What would normally be a plain email is now a lot more unique.
From: Ravyn Wilde
Subject: This Months FREE Book! 👽 📚
If you’re using an HTML email upload, you’re responsible for coding the background image. There are different ways to do so, for example by using table background attributes, inline CSS or embedded CSS.
When you’re a MailerLite customer, you can send custom HTML emails by uploading a zip file, importing from URL or directly pasting the code. With the automatic CSS inline editor, you can improve the code. The newsletter background can be previewed on desktop and mobile.
Since the majority of MailerLite customers use our drag & drop editor to add background images, we won’t go into detail about the HTML part itself. This HTML email guide to background images will, if you’re curious.
Email templates with a background image can make your email marketing campaign more engaging, unique and instantly give it a different look.
Make sure the email background complements, not replaces the other newsletter elements. A great background emphasizes the email content and CTA, and doesn’t take away from its attention.
Email backgrounds are best used when you keep the file size under 1 MB. The ALT text and fallback color will make sure your newsletter stays readable, even on the rare occasion that your image isn’t shown.
Keep these questions in mind when you're adding a background image to your email, and you'll create a newsletter that pops!
Editor's note: This article was originally published in June 2020, and has been updated with a recap list to make sure your background images are ticking all the boxes!
I’m Megan, Content Writer at MailerLite. You can find me in Berlin, NYC or somewhere escaping winter in Asia. I have helped many start-ups grow their online visibility. Blogging has always been my thing—from running artist fan pages as a teenager to now discovering upcoming talent on Sign This Kid.