Search MailerLite
Start typing to search

No results

Megan · 15 min read · Tips and resources · September 17, 2020

How to use background images in email campaigns the right way

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.

Difference between email background and email element background image

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:

  • Give your emails a completely different look

  • Transform an email into a beautiful small website

  • Make your newsletter stand out from competitors

  • Influence subscribers to keep reading

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.

Article recommendation

Read about the 10 best ways to use images in newsletters to learn what to pay attention to when picking your imagery.

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.

Email background image example blue sage grey

Know which email clients support backgrounds

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:

Desktop clients

  • Outlook 2016, 2019 and Outlook Office 365 (all Win 10) show no overall background image but do show backgrounds in image blocks

  • Windows 10 Mail shows no background image and no backgrounds in image blocks

  • All other desktop clients show the images correctly (including Apple Mail)

Mobile clients

  • Only Android 6.0 and Gmail App IMAP show no background image and no backgrounds in image blocks

  • All other mobile clients show images correctly (including all iPhones)

Web-based clients

  • Only and show no overall background image but do show backgrounds in image blocks

  • In all other clients, the emails are displayed perfectly (including AOL Mail and Yahoo! Mail). If you’re not catering to the German market, you’ve got nothing to worry about.

Verdict: Check your email reports to see what clients your subscribers use. There are only a handful of email clients that aren’t capable of showing pictures, but the majority have no issues at all.

Optimize the file size

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.

Keep your email background images responsive

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.

Have a backup ready (ALT text and color)

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.

Have you seen our pre-made templates?

Our free email templates are a good foundation to start building from. Some versions already have a background, like our Fashion Wave newsletter template.

Look 1: Transformative

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?

From: Mintel

Subject: [WEBINAR] Discover the 2030 Global Beauty & Personal Care Trends

Mintel trendy collage email background example

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.

From: Moment

Subject: Tips for Photographing Peaceful Protests

Moment email newsletter background example

Look 2: Seasonal flair

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?

Lisa Prescott seasonal newsletter rose background - MailerLite

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?!

Clean Creations newsletter background spring flowers and light mauve - MailerLite

Look 3: Audacious

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

Jetsetter Vintage newsletter background image yellow and blue gif - MailerLite

Look 4: Elegant

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

83 oranges email background example square pattern - MailerLite

Do you want to design newsletters like the one above? Our ultimate guide to newsletter design teaches the skills you need.

Look 5: Color-blocking

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

Lark Avery background in email newsletter example rose and white - MailerLite

Look 6: Animated GIFs

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 🛍️

See Mom Click white and light teal newsletter background GIF - MailerLite

Look 7: Gradient

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.

From: Zteep

Subject: IG LIVE Tonight: How to Make Tea Lattes

Zteep Tea purple orange gradient newsletter background - MailerLite

Look 8: Subtle pattern

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? 🌿

Narrow Bridge Candles light grey and beige email background - MailerLite

Look 9: Spacey

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! 👽 📚

Ravyn Wilde galaxy stars email background example - MailerLite

The easiest way to add a background to your email is by simply using MailerLite’s drag & drop editor. You can find the instructions for adding a background image here.

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.

Let's recap! When you're adding in your background image, ask yourself:
  • Does the background image complement the other design elements of my newsletter?

  • Will it emphasize the text and the CTA?

  • Will the background image be supported on my subscribers' email platforms?

  • Is the file image size optimized?

  • Is the background image responsive?

  • Have I added ALT text as a backup?

  • Is the font large and contrasting with the image?

Keep these questions in mind when you're adding a background image to your email, and you'll create a newsletter that pops!

Have you tried using a newsletter background? Paste the preview URL in the comments, we're curious to see.

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!

Megan de Graaf

I’m Megan, Senior Content Writer at The Remote Company. Ever since I started working remotely, I pick my homes depending on the seasons: Europe during spring and summer, NYC for autumn, and winter escapes in Mexico.