Home Resources Blog

Adding background images to email? We’ve already done the hard work for you. Check out Stig‘s ‘Bulletproof Email Background Images’ code generator at backgrounds.cm

Also, a more elegant and up-to-date method for displaying background images can be found here.

We often get asked about the best way to add a background image to an email newsletter. Well, the good news is that there’s a reliable way to get a repeating background image to surround your content in most major email clients, including Gmail and Outlook 2007! In this post, we’ll walk through two techniques which can be combined to give your design some background image love.

The table attribute approach

Look, I’ve written some darn ugly code in my time, but I still get itchy when I use tables. In so much as we shy from them, it should come as no surprise to you folks at home that a fair few table attributes are fairly well supported by the major email clients… And in particular, background.

So, the first thing you can do is to wrap your newsletter content in a table of width="100%", so it spans the width of the reading pane. Then, add the attribute, background=background_image.png and it should all be roses. Here’s how:


<table width="100%" border="0" cellspacing="0" cellpadding="20" background="background_image.png">
<tr>
<td>
<p>Content on a pretty background image.</p>
</td>
</tr>
</table>

So far so good. The table will expand downwards as you add more content, so a repeating background image will tile just nicely until the end of your email.

The good news is that this works in most major email clients, including Gmail. Notable exceptions are Outlook 2007 and 2010, plus Lotus Notes 6 and 7.

The CSS approach

Not wanting to keep the ever-demanding Outlook 2007 and its relation, Outlook 2010 away from the action, we turned to a crafty technique for getting background images to work in Outlook 2007. The code looks something like this:


body {
background-image: url('background_image.png');
background-repeat: repeat-y no-repeat;
background-color: #333;
margin: 0;
padding: 0;
}

Surprisingly enough for a CSS solution, this does the trick in Outlook 2007 et al. The main difference between this approach and using table attributes is that in some email clients, the background image will extend the entire height of the reading pane, instead of simply the height of the email. However, unless you have a fairly short email (less than the height required for the scrollbar to kick in), you won’t be able to tell the difference.

I’ve also had it pointed out that using the background attribute in the body tag works in a similar fashion. Unfortunately, it doesn’t seem to display a background image in Outlook XP. Considering you have to use some CSS anyway (see below), you might as well stick to our CSS approach.

So are you thinking what I’m thinking?

“By your powers combined!”

By using both the table attribute and CSS styles in your HTML email, you pretty much have the entire spectrum of major email clients covered. Don’t forget to set margin: 0; padding: 0; in body (as above) – otherwise your table background image won’t be flush with the image defined in your CSS styles.

And finally, if you’re really finicky, you can define a fallback color for Lotus Notes 6 & 7 by using, <body bgcolor="#333"> (where #333 is the color of your choice). If you’ve already defined a fallback background-color using CSS, then this will only display in these earlier versions of ‘Notes.

Well, that’s background images in the bag. Many thanks to Stephen for the awesome tip and staying up late to give us first-hand World Cup updates. Let us know below if you have any questions, or have been using a similar alternative!

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.

Subscribe

See why 250,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free