by Sophie Daniline 
Making B2B email design exciting and creative is a constant challenge for email marketeers. This challenge is heightened by one email client – Outlook. Outlook makes everything from animated gifs to typography style problematic. One area of email design this is increasingly apparent in is background images.
So what is a background image in email? How can we build them into our emails, and what contingencies do we need to put in place for our Outlook recipients? We’ll answer all your questions below.
What defines a background image?
A background image is always easier to define than it is to build. Background images are images that are applied to the background of an element in an email. For example, in this B2C Email from Tommy Hilfiger:
The benefit to doing this is that any copy that sits on top of the image can be individually selected separate from the image. You’ll see in the image below, I can select the text separately from the image.
This therefore allows you to have text, or calls-to-action existing within that same space.
An additional benefit to using background images is that it ensures that your message is still readable by subscribers when images aren’t displayed. Also, in B2C emails, it is a key technique when trying to make your emails more accessible.
How do you build a background image into an email?
There are actually several techniques to background images in email:
1. In-Line CSS
The first method we’ll look at is using the CSS background-image property inline, for example on an element like a div or td. The background-image property uses your URL, which is how you point to your background image.
<td align=”center” style=”background-image: url(‘http://path-to-your/image.png’); background-repeat: no-repeat; background-position: top center; background-size: cover;”></td>
You’ll see from the line of code above, that there are several additional attributes we can include to allow for flexibility:
- background-repeat: no-repeat; – This will stop the image from repeating on both the X and Y axis
- background-position: top center; – This allows you to position the image somewhere other than the top left
- background-size: cover; – This allows you to state how the background image should be sized to cover the space available. When your building for mobile, this will be incredibly useful as mobiles will usually try to shrink your background image. Here, you can tell the mobile device to ‘cover’ or ‘contain’, which allows you to display the background image in a more user-friendly manner.
2. Embedded CSS
The second method is using Embedded CSS. This is a great method if you want to reduce the amount of code in the main body of your email. Instead of coding in-line, we’ll instead be using a stylesheet.
The first thing we have to do is target the element in our HTML using an ID or Class. For example:
<td class=”BGImage”></td>
Then, in the <head> </head> section of our email, we’re going to add a style section <style> </style>, and add our CSS in there. For example:
<style>
.BGImage {
background-image: url(‘http://path-to-your/image.png’);
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
</style>
This method is my preference, as it keeps your main body of HTML clean. It also allows for much easier updating.
3. Table Attributes
The most traditional format for background images – table attributes utilises the classic ‘background’ attribute. The background attribute takes a URL as its value, which is where your background image is hosted.
<td align=”center” background=”http://path-to-your/image.png”></td>
This method isn’t super flexible. You can’t position or resize the background image which, on today’s mobile devices, is often required. Additionally, your background image will repeat by default across both the X and Y axis. That can look rather clunky, and not provide the best user experience for your customers.
If you are already building your email using table attributes, this method might be for you. Just remember that ‘background’ attribute is now deprecated. Luckily, due to HTML’s backwards compatibility, this method will still work.
What’s the issue with Outlook?
Many version of Outlook do not support background images in email. With Outlook being the fourth most popular inbox in the world, and used en-mass across businesses, it’s important that we provide an experience for our customers using Outlook.
When an email containing a background image hits an Outlook inbox, the image will not display. This means we have to provide something else for Outlook to display, otherwise we run the risk of providing a lower quality experience for customers.
How do you build a background image fallback?
Regardless of which method you have used to build your background image, the fallback property is always the same: background-color.
For example, if you are using the in-line method, your code would look like this:
<td align=”center” style=”background-image: url(‘http://insert-link-to-your/image.png’); background-repeat: no-repeat; background-position: top center; background-size: cover; background-color: #c5e06f;”></td>
Remember! If you’re not American, the spelling of ‘color’ may trip you up, so if you’re getting frustrated that your background colour isn’t working, check your spelling!
Should you be using background images in B2B Marketing?
The answer to this question is going to depend on your answer to this: Are you happy with your content if your customers only see your fallback colour? If the answer is no, then you should not be using background images. If the answer is yes – go ahead! Just make sure you test plenty before you deploy your email.
Thinking about implementing background images in your email and want some advice? Get in touch with us.