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.
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!
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:
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.
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" />
After these tags, add your content in its own enclosed table and then close all the above tags:
<!--[if gte mso 9]>
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.