Blog

Add a background image to your email in two simple steps

June 23, 2010

An updated method for adding a background image to an email body or table cells is available here.

Gmail

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!

Posted in: Tips & Resources

45 Comments

Jake Holman
June 23, 2010 9:05pm

Damn, you guys have discovered me long held secret!
Tim Anderson-Bonsor
June 23, 2010 9:26pm

I’d given up on backgrounds in email - thanks very much for posting this.
Chris
June 23, 2010 10:38pm

What does this do for the size of the email though?
Craig
June 23, 2010 11:00pm

Thanks for posting guys.

@chris - no more than adding any other image - what are you getting at? And technically, the size of the email isn’t affected as the images are downloaded from the server. If someone doesn’t want images, they don’t have to turn them on.
caleb
June 24, 2010 12:01am

But would this work if it were to be applied inside a cell with text in it?
Caryn
June 24, 2010 1:06am

This is awesome info. Thanks!
Dennis
June 24, 2010 1:26am

Funny to see the CSS solution and not the HTML one work in Outlook :)
Chet
June 24, 2010 2:06am

Does it matter where you place the css for the body</pre> styles, or do you just add an inline <style></pre> tag and place the css it in that? I know that some email clients strip out the <head>/pre> section.
Dean
June 24, 2010 8:24am

This is great news when you want the attribute applied to the entire background. My main hurdle is getting it to work for side borders alone. It still appears as though Outlook wont accept classes for background images, only body. Has anyone had any success with this?
Ros Hodgekiss
June 24, 2010 9:57am

Caleb - Unfortunately, this doesn’t seem to work as well when applied to individual table cells. In particular, Windows 07/10/Mail just won’t play nice.
Sudeep
June 26, 2010 8:20pm

great post….

i am not much of “table” user,but when it comes to e-mailer(specially for outlook) i always use them…
MG
June 27, 2010 12:49am

I almost never use tables for web pages .... but when it comes to email they solve a lot of problems. Great post ! Thanks.
Federico Capoano
June 27, 2010 1:46am

Nice tip.. using ugly old style HTML and CSS in email works always better.
Bravo Web Solutions
June 27, 2010 2:38am

The only way I’ve been able to get background images to render in email is to reference the image via url(‘http://domainname.com/imagename.gif’) for example. Otherwise how does the recipient reference the image; it’s not like it get’s attached automatically - right?
Ros Hodgekiss
June 28, 2010 9:53am

Hi Bravo, Campaign Monitor hosts any images that you upload during the campaign import process and updates your links accordingly to reflect this. So background-image: url(‘background_image.png’); is fine, as long as you zip up background_image.png and import it as well.
Veiko
June 28, 2010 10:05pm

Hi, tried but still not working :( Outlook 2007 cleans up the body tag and marks out style tag. Outlook source below. Do you have any fix for it?

// original html //

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html lang=“en”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
<title>Newsletter</title>
<style>
body {
background-image:url(‘www.mydomain.com/bg.gif’);
background-repeat:repeat-y no-repeat;
background-color:#ffffff;
margin:0;
padding:0;
}
</style>
</head>
<body border=“0” topmargin=“0” leftmargin=“0”>

<table width=“100%” cellpadding=“0” cellspacing=“0” border=“0” bgcolor=”#ffffff” background=“www.mydomain.com/bg.gif”>
..

// Outlook 2007 source //

<html><head></head><body><meta http-equiv=“Content-Type”
content=“text/html; charset=utf-8” />
<title>Newsletter</title>
<style><!—
body {

http://www.mydomain.com/http://www.mydomain.com/http://www.mydomain.com/bg.gif’);

background-image:url(http://www.mydomain.com/bg.gif’);
background-repeat:repeat-y no-repeat;
background-color:#ffffff;
margin:0;
padding:0;
}
—></style>
<table background=“http://www.mydomain.com/bg.gif” bgcolor=”#ffffff”
border=“0” cellpadding=“0” cellspacing=“0” width=“100%”>
..
Nickolas Simard
June 28, 2010 11:09pm

Great job in summing it all up for us. I’ve always used table in email designs, and I still see that this (old) technique have its uses for some email clients.

In any cases, thanks for sharing the tests you made.
diane
June 28, 2010 11:17pm

will an inline style work as well as attaching the css in the header?
David Bloomfield
June 30, 2010 1:28am

@veiko Try putting http:// in front of your image url and see if that works.
Edward
June 30, 2010 1:32am

Wow, I never knew you could add the background attribute directly to the table tag, i will have to try this out today.
Tony
June 30, 2010 2:02am

Adding images and table to your email newsletter is nice, but unfortunately the recipients spam software will still kick it out because of base 64 and being able to detect that it is an html doc
Dan
June 30, 2010 2:10am

It doesn’t work for me either. Even with http:// in front of the image ref.
Frederick
June 30, 2010 3:37am

Please provide your code, this is not working for me?
BrenFM
June 30, 2010 8:14am

@Veiko - another trick we’ve picked up is that some emails strip out style code in the head section. Generally we put our style declarations below the body tag (seems to be greater support for this). Dunno… might help you, might not!
Ros Hodgekiss
June 30, 2010 12:15pm

Dan & Frederick - Check out this basic sample newsletter - hopefully the source code will give you some pointers to get it working.

Diane - yes, it should. By default, Campaign Monitor moves your styles inline upon import of your email.

Tony - we haven’t come across any particular spam filter issues with using this technique. It doesn’t use base64 encoding, just plain-jane HTML/CSS.

Thank you, everyone! We’ve been loving the feedback from all of you, so keep being awesome. Happy emailing!
Dan
June 30, 2010 3:47pm

Thanks Ros
It seems that bg image needs to repeat-y. Without this attribute it doesn’t work. What if I want to use only one image and don’t repeat it?
Ros Hodgekiss
June 30, 2010 4:53pm

Hi Dan, yep, that’s spot on. Unfortunately, I’ve tried using one, non-repeating image and it doesn’t seem to work. If you use background-repeat: no-repeat; the background image doesn’t display in Outlook ‘07.

So, it’s a repeating background or nothing, it seems. Or potentially, you can use a helluva big image…!
Dan
June 30, 2010 6:25pm

Hi Ros
I don’t really want to do massive BG image because of mobile device users. I’m trying to get to the bottom of this and I will let you know as soon as I find solution to this
Jess Bonde
June 30, 2010 6:29pm

Great tip!
I put all my CSS inline and I’ve also heard that I should only put in the mail what’s inside the <body> tag because clients don’t consider the <head> and <title> and all that anyway. If I use this approach do I just put the <style></style> above my html or is that bad?

So it’s:
<style>
MY CSS
</style>
<table>
MY CONTENT
</table>
Vincent
July 1, 2010 8:39am

Hi Ros, I’ve tried copy and paste the sample code but it doesn’t work for me in Outlook 07(the html email only display the background color). The background image I’m using is saved on a web server and I’m using a absolute path to link to it (e.g. http://www.dominname.com/imgs/bgImg.png). I was wondering if there is any requirement for the location of the background image?

Thanks a lot for your help!
Aaron
July 1, 2010 8:59am

Does the CSS only work on the body tag in 07, or can this be applied to any element (eg the table element)?

Cheers.
Ros Hodgekiss
July 1, 2010 3:55pm

@Jess - A lot of email clients do have the habit of stripping <head> tags. However, Campaign Monitor moves a copy of your styles inline by default, so this isn’t such an issue. Your approach is valid, too, as is just making your styles inline when coding your email :)

@Vincent - Very interesting. Your example should work, as the app assigns an absolute link to all images imported with your HTML email (ie. we host ‘em), then uses this link in your campaigns. Could you kindly send an email with your code (including a link to your image) to support [at] campaignmonitor.com, addressed to me? I’ll certainly take a look into it.

@Aaron - Sadly, it only seems to work with the body tag in ‘07.
Frederick
July 2, 2010 5:03am

Hi Ros,
I pasted your code, I gave the image the correct path
background-image: url(http://www.campaignmonitor.com/downloads/bg-image-sample/grey_stripe.png);
But it still does not work in Outlook 07.
I am sorry to ask, and I do not mean any disrespect… but can anyone else test this and give their comments? This is a big deal if it does work.
Bryan Quilty
July 3, 2010 3:35am

It’s too bad this only works on the body of the email and not within nestled tables. Either way, it’s useful! Thanks, Ros!
Brian Thies
July 3, 2010 4:26am

As many have posted on here already, please keep in mind this is for the background “body” of the entire e-mail.

The body tag and a 100% table are used to double up the effort of creating the tile/repeating background.

The next level down, however, is your centered nested table containing your content. This is where incompatibilities exist, and pitchforks are raised at Microsoft.
James
July 6, 2010 2:51am

hi does this only work in the body tag? I can’t get it to work in a table cell.
James
July 6, 2010 2:52am

ah just read the comments this won’t work in table cells :(
Ros Hodgekiss
July 6, 2010 1:21pm

Update: There’s also an alternative method that works with individual table cells. Check it out here. We’d love to hear any feedback you have regarding this!
Frederick
July 7, 2010 5:45am

Hi Ros, I tested their example and the background image does not show up in Outlook 03 or 07. I am having a hard time believing this has been tested. PLEASE help? I would love this to really work.
Ros Hodgekiss
July 7, 2010 9:38am

Hi Frederick, so both this method and Brian’s new method aren’t working for you, when tested on a desktop email client (ie. not the design & spam tests)? Hmm, you might want to check your security settings to ensure that images are being downloaded.

As above, kindly send an email with your code (including a link to your image) to support [at] campaignmonitor.com - address it to me and I’ll certainly take a look into it. Alternately, we might be able to help you via Brian’s thread on the forums.
Brian Thies
July 13, 2010 8:30am

For those who had issues when using the background image fix and background colors (colors were trumping images), there’s a fix now posted on the thread mentioned by Ros.
ChrisYella
July 29, 2010 2:35am

Thank you very much - this solution works quite well when displaying background images in Hotmail and Live mail! Now my html emails display in Outlook (not all versions tested though…), Outlook Express, Hotmail, Windows Live, Thunderbird, and Gmail.
Rob Langdon
July 30, 2010 2:21am

This is a great help, much appreciated CM! :)
Yannick
August 3, 2010 8:08pm

Just posted the fruit of an experiment with background-image on the CM forum

http://www.campaignmonitor.com/forums/viewtopic.php?pid=14683#p14683

Let me know what you think good people :)
ella
September 1, 2010 5:03pm

Great stuff

Comments for this entry are closed.

Browse the Blog

Explore the Email Gallery

@HunterOwens And sorry again! This one has been frustrating for everyone, but obviously for affected customers the most!

Not just good looks

Track every aspect of your campaigns like opens, clicks, forwards, sales and more.
Free templates

Over 30 professionally designed email templates tested in all major email clients.
Create a free account

Sign up, kick the tires and start sending in less than 60 seconds.