Add a background image to your email in two simple steps

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:

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!

45 Comments

I’d given up on backgrounds in email - thanks very much for posting this.

Chris
24th June

What does this do for the size of the email though?

Craig
24th June

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
24th June

But would this work if it were to be applied inside a cell with text in it?

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?

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?

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
29th June

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?

@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!

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
30th June

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
1st July

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
1st July

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

@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.

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.

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
29th July

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.