See how brands use animated backgrounds to add movement and depth to their email designs—and learn how you can do the same. 

In recent years, many brands have embraced the power of animation, utilizing animated GIFs as primary design elements to show off their products and tools, or to simply add some movement and fun to their campaigns. But animations don’t always have to take the center stage in your email design. You can also use animations to spice up your background imagery, giving your email design more depth and a truly special look and feel.

In this post, we show you examples of brands that have mastered the art of animated backgrounds—and provide you detailed tips on how you can implement animated background images in your campaigns, too.

How brands use animated background images in email

You can’t quite picture how a background animation could look like? Let’s check out some beautiful examples:

Adobe catches the eye with colorful, animated background shapes

In this campaign, Adobe uses an animated GIF to show off its new Photoshop Camera app. At the center of this design is an animation that shows the app in action, but keep an eye on the colourful shapes in the background. You’ll see that these change colors as well—swapping from red to purple and from purple to yellow—making this bright and colorful email design truly special.

blog-july2020-adobe.gif#asset:1997

Adobe’s campaign — and the background image that powers it. See the full email.

If you peek at the email’s code and how the imagery is set up, you’ll see that the entire top area of the email contains one animated GIF that’s set as a background image, and the logo, copy, and call-to-action are placed on top.

Uber brings holiday joy to the inbox with animated illustrations

In this email, the design team at Uber is bringing their beautiful holiday-themed illustrations to life with animations. But rather than placing the animated illustrations at the center of the campaign—they could have easily created an animated GIF to be featured in the email header or to break up the content—they’ve decided to use them as a background image that frames the email copy and the CTA. The result: a beautiful campaign!


blog-july2020-uber.gif#asset:2010

Uber’s campaign — and the background image that powers it. See the full email in Really Good Emails.

Shutterstock brings color to the inbox with an animated gradient

Background animation can also be really subtle—and still be powerful. Check out this example from Shutterstock:

blog-july2020-shutterstock.gif#asset:2011


Shutterstock’s campaign — and the background image that powers it. See the full email.

The email designers at Shutterstock placed their header copy and a screenshot of the new plug-in on a blue and purple gradient. That gradient though isn’t static; it subtly moves throughout the header, really catching the readers’ eye.

Article plays with shadow and light to grab subscribers’ attention

This animated background from furniture brand Article doesn’t utilize bright and bold colors like some of the examples above. Instead, they use a dark animation that only shows enough of the featured armchair to pique subscribers’ interest.

blog-july2020-article.gif#asset:2012

Article’s campaign — and the background image that powers it. See the full email in Really Good Emails.

Why does this work so well? The human brain is wired to wanting to complete shapes—and if you don’t have all the pieces that it takes to complete the image, it’s only natural that your eye gets drawn to any additional info that could help you put the missing pieces together.

In this email, the reader might not be able to recognize the full shape of the chair in the first few seconds of viewing the email. The result: They will view the animation for a little longer, following the natural drive to get a full grasp of the object. These extra few seconds might be just what it takes to encourage the click.

How to add animated background images to your email campaigns

Do you have a great idea in mind that utilizes an animated background but aren’t quite sure how to get started with building it? We asked our friend and fellow #emailgeek Jay Oram how he’d tackle adding an animated background to an email, and here’s what he said. Over to you, Jay!



Jay Oram is an Email Coder & Interactive email specialist at ActionRocket with years of experience in translating great designs and creative ideas into email HTML. You should connect with him on Twitter @emailjay —or say hi on the #emailgeeks Slack.



If all you’re looking for is copy-and-paste ready HTML code for your animated background, jump straight to the CodePen. Or, read on for a deep dive into the code that powers animated backgrounds.

The basics: understanding background imagery in email

Before we dive into animated backgrounds, it’s key to understand how background images in email work in general. There are a lot of great blog posts about the code you need for a background image, like this one that covers it really in detail.

But at the most basic level, to set up a background image that works across email clients you need to create a containing table—and then set the background image attributes and inline styling on the first <td>. Anything you then put inside that cell sits on top of the background image.

The table cell that holds all the content will need a few tweaks:

<td bgcolor="#000000" background="YourImageURL" width="640" height="400" style="background: url('YourImageURL') center / cover no-repeat #000000; background-position: center; background-size: cover; background-repeat: no-repeat;">

Some of this looks repetitive, you say? You’re absolutely right. But we’re offering our background image instructions in a few different ways to ensure that as many email clients as possible will understand them. Let’s break it down:

The HTML attributes bgcolor, background, width, and height are all there to cover email clients that don’t support the inline CSS styling. Adding the width and height as HTML attributes will also give a hint to the browser or email client about the gap to leave for your content.

Next, let’s look at the inline CSS: The shorthand all wrapped up in a background tag adds support for webkit email clients and webmail, as well as the Gmail app with non-gmail accounts, as found by Justin Khoo over at Fresh Inbox.

background: url('https://via.placeholder.com/640x400') center / cover no-repeat #000000;

Lastly, we’re adding the same information again, but in long form to add more control over Yahoo and AOL apps’ backgrounds.

background-position: center; background-size: cover; background-repeat: no-repeat;

And finally, we’ll need VML to make the background image work in Outlook for Windows Desktop apps. Outlook still uses the Word rendering engine to render email designs, and VML (Vector Markup Language) is the language that controls shapes, colors, and image layers behind text in this environment.

We won’t go into the details of VML here but highlight the key element you must keep an eye on when using background imagery. Always ensure that you’re using the same image link in the src="" field. Plus, for the size to be correct across all Outlook clients and Windows 10, you’ll have to convert the pixel size (px) to points (pt).

To get points values, just multiply your pixel value by 0.75. For example, 640(px) x 0.75 = 480(pt).

<!--[if gte mso 9]> 
<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" src="https://via.placeholder.com/640x400"></v:image> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block;position: absolute; width: 480pt; height:300pt;">
<v:fill opacity="0%" color="#ffffff" /> 
<v:textbox inset="0,0,0,0"> 
<![endif]-->

After these tags, add your content in its own enclosed table and then close all the above tags:

<!--[if gte mso 9]> 
 </v:textbox> 
 </v:rect> 
<![endif]--> 
</td>

Getting your background to animate

So now we’ve got a background image set up—but how do you get it to animate?

The answer to it is simple: Rather than using a static image to fill your table cell, you just drop in an animated GIF!

Your code will remain the same, but you’ll have to be aware of a few additional limitations when it comes to email client support.

Email client support for animated background images

The code above guarantees background image support across all major email clients. (A comprehensive list of support can be found here.) To find out what email clients support animated backgrounds, you’ll have to take a look at what email clients also support GIFs. If there’s overlap—and an email client supports both background images and animated GIFs—users of these clients will be able to see animated backgrounds.

Email Client Background image support Animated GIF support Animated background support
Apple iOS/Apple Mail
Gmail
Yahoo/AOL
Outlook.com
Outlook Macs
Outlook Windows (07-16)
using VML
⛔️ ⛔️
Windows 10 Mail
using VML
Outlook for Windows (19)
using VML

Partial GIF support

Partial GIF support
Samsung Mail
Gmail App Non Gmail Account

As you see, animated backgrounds are supported in many of the most popular email clients. There’s a few limitations thought that you should be aware of:

  • Outlook for Windows and Windows 10 Mail don’t support animated GIFs. Instead, they will only show the first frame of your GIF. So when working with a GIF as a background image, make sure its first frame makes sense when displayed as a static image. Alternatively, you can include an Outlook-specific image in the VML that will only display in Outlook clients.
  • Outlook doesn’t respect horizontal padding on top of VML background images, so you can use align=”center” to center content, but if you want to position it with padding, you will need to substitute in spacer images.
  • Windows 10 Mail supports background images—but some versions do not support images on top of background images. So it is best to avoid them.
  • Outlook 2019 for Windows supports animated GIFs but your GIF will only loop three times—and then stop. Ensure your GIF makes sense in the email context, even when it comes to a pause.
  • Android 5.1 and 6.0 native mail don’t support background imagery. But since these are quite old versions—we are on Android 10/11 now and Android phones tend to come with Gmail pre-installed—this likely won’t cause you too many headaches.
  • T-online.de only supports HTML attributes. If you add the inline CSS above, it will stop background images working in T-online. Keep an eye on this if you have a lot of German subscribers on your list.

Don’t forget to set your fallback colours

It is important to set a suitable background colour on the table cell and in the styling. That way, if your image doesn’t work—be it because of a broken link, a slow loading image, or missing email client support—the content on top of it will still be visible. Choose your background color based on the content you’ve layered on top of it. For example, if you have white text over your background image, make sure to set a dark colour as a fallback.

Optimizing the file size of your animated background image

The image size of your background image—that’s the width and height—can be anything, but it’s crucial that you keep your file size as low as possible. If your animated GIF contains much detail and many frames, your file can get large quite quickly. We’ve seen GIFs as big as 8MB in some emails—and that really impacts the email’s load time, especially when you’ve got a slow internet connection. Even the most beautiful animation can’t make an impact if they won’t load for your subscribers, so we recommend keeping all GIFs under 2MB in file size.

If you’re looking for tips on how to compress your animated GIFs to optimize them for your emails, check out these 10 tips for optimizing GIF file sizes for email.

Adding a background image module to Taxi

If you’re using Taxi for Email to create your emails, you can make it really easy for your team to add background imagery—without having your marketing team to touch any code.

This article shows you how to add a background image module with Taxi Syntax—and it works for both static images and animated backgrounds. Plus, if you’d like to set a maximum file size for all imagery to make sure that no campaign your team sends ever suffers from bloated images and long load times, you can do that in Taxi, too. Do you need any help getting your background images in Taxi to work? We’re here to help!

Need a helping hand to bring your email ideas to life?

Whether it's a campaign featuring an animated background or something else, the team at ActionRocket is here to support you along the way, from email strategy to design and development. Learn more.


See how Taxi can help your team

Taxi helps marketing teams make better quality email, quicker, at a larger scale.

Let's set up a conversation→

Share


44,916 email campaigns and counting.

Join the smart marketers using Taxi to make better email.

🗓 Join our next webinar: How to use the power of imagery in email design →