Background Images and Microsoft Outlook 2007

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 emailbg.net

I’ve been hard at work getting the next round of templates ready for mass consumption and stumbled upon something I could have sworn wasn’t possible. My background images (on the body) were working. Uhh, huh?

I glanced across the office and asked Mat if this was something he knew about and simply never told me but he was just as surprised as I was. The bit of CSS that has proven itself effective in Outlook 2007 is:

background-image: url('http://www.abcwidgets.com/bg.jpg');
background-repeat: repeat-y no-repeat;
background-position: top center;
background-color: #d9c092;

Now the key difference with this and every other bit of CSS code I’ve ever written was the background-repeat. In the past, I would use solely:

background-repeat: repeat-y;

And while every other client seems to gracefully assume no-repeat for the repeat-x, Outlook 2007 does not. Stick that in and boom, you have body background images working.

I gave this a go with some other elements (like divs and tables just to make sure we weren’t all going crazy) and background images definitely only work on the body and otherwise don’t display.

Wayde Christie

Handy indeed.

Cheers.
Peter van den Heuvel

I stumbled upon this a few months ago when I was experimenting with the possibilities of “stationeries” and “themes” in Outlook 2007. In a Word document one can select a “theme” with a background image and lots of other properties. The Outlook 2007 residu of this seems to be the possibility of a background image in the body tag, as part of the stationery. See also
Managing custom stationery and themes for Outlook 2007
Drew Barton

Thank you! Thank you! Thank you!
Nathanael

Thank you so much for passing that along. Having this ability in Outlook 2007 reopens up much greater design possibilities!
Rylan

Don’t body-background images not work in Gmail still though?
Anna Yeaman

Cool work around Travis!
Mike Causer

The entire body tag is ignored by Gmail. To get them working in Gmail, just insert a div with an inline style background image inside the body tag.

The body tag gets stripped by Gmail, but the div remains.
Outlook renders the body background image and ignores the div.
Win.
Jed Watson

Just a thought (haven’t had a chance to test) – to get Outlook and Gmail to play nice, couldn’t you double-up the elements, having a background on the body and a div right on top of it, taking up the same space?

Outlook displays one, Gmail displays the other, and self respecting clients display both but they’re on top of each other so it doesn’t matter?
Dave Greiner

Mike (and Jed), that’s a great idea, good thinking.
Andy

Why this is a tremendous fine. Good job!
Andy

Good find, thanks chaps.
Martijn de Valk

Good Job! I could realy use this one!
Yannick Schall

Hi there,

I’m a bit confused with this trick people.
I gave up background images in html email when Yahoo droped the support for background images from the style tag in the head of the document (Use to work well fine and all of the suddden not), and i use to craft some specific style for hotmail and other email client that would not support background-images.
in short i spent loads of time on each design every time.

So i was quite interesting to see this topic coming back, but when i try the background-repeat: repeat-y no-repeat; the ‘gracefully assume no-repeat for the repeat-x’ doesn’t actually work and the background is treated as repeat and just repeat all over.

so have I misunderstood something?

////////////////////////////////////////////////////////////////////////////////
about the ‘having a background on the body and a div right on top of it’ and double the style to get the background in hotmail and Gmail.

i just can’t get any background at all in Gmail.
I tried with shorthand notation for the background as well as beaking it properties per properties. The only difference is that if i break it down, hotmail doesn’t display the background anymore, if i keep the shorthand it displays the background image.

and i would reaaly love to display background images in Gmail.
Bryan Quilty

You guys kick ass. Seriously. This is the most resourceful blog for HTML developers who make a living coding emails. Cheers.
Yannick Schall

[Travis] Hi there, i did some more test but for some reason i can’t manage to make this thing work. the only background images that i can get are in divs with inline shorthand notation to make sure it displays in hotmail.
would you have a code online somewhere so that i can check what you are exactly doing.
cheers
Yannick Schall

Oooopsy!
And by the way yes, this is the most resourceful blog for html email developers, Bryan you are so right.
Love you guys!!!
Derek

f-ing awesome. Thanks.

Hey people, the title of this article is background images and OUTLOOK 2007, not Yahoo, not Gmail, not Hotmail. Degrade gracefully, beyond that it’s out of your control baby.

Gmail only accepts some inline css and it’s unlikely any webmail client would use any of your html’s head contents, since they must have their own head in order to draw they interface.

Generally the only person who cares about your pretty background images is the person who designed it anyways. :) Can you still read it in Gmail? Does it look broken? Then you’re fine. If they want to see your background images so bad then they can download a real email client. My bet, they didn’t subscribe for the background images and they won’t unsubscribe if their email client can’t display them (as long as you degrade well, ie no white text on white backgrounds).
Andrea

Hey guys… but are you sure it works?
I tried this:
[body style=”height:100%; margin:0; padding:0; background-color:#FFFFFF; background-image:url(https://www.campaignmonitor.com/assets/uploads/https://www.campaignmonitor.com/assets/uploads/background.gif); background-repeat:repeat-y; background-position:left top;”]
[div style=”height:100%; margin:0; padding:0; background-image:url(https://www.campaignmonitor.com/assets/uploads/https://www.campaignmonitor.com/assets/uploads/background.gif); background-repeat:repeat-y; background-position:left top;”]
contents
[/div]
[/body]

and I can’t see any background image both in gmail and outlook2007…

So… can you give us a working example, please?

bYe!
Noclegi Ustka

In Outlook 2007 all is right. But I just can’t get any background at all in Gmail.Sorry
Andrea

Is yours a reply to my post?
Aecio Lemos

The body styles (background-image) don’t work in outlook 2007. You have to create a DIV with the image at the top of the page and put the logo there and put the style in the DIV itself, not in the HEAD area. I have no clue why, but that is the only way I got it to work.

The example below creates a logo and a signature. Copy paste into an HTM (stationery.htm, for example) file, and save it in your user microsoft/stationery folder (example in Vista: C:UsersAecioAppDataRoamingMicrosoftStationery) and then in Outlook 2007, go to the ACTIONS menu and click on NEW MAIL USING option, then MORE STATIONERY. The file you created (stationery.htm) will be in the list.

Good luck!

VLS Web

O primeiro provedor de hospedagem gerenciada do Brasil

http://www.vlswebcom.br/
bobo

Andrea, did you absolute URLs or the relative ones you list in your sample? You need to use absolute URLs for the images like this:

background-image:url(http://your.domain.com/images/…

that should help you out a bit….
GurlS

I cannot get this to work in Outlook 2007 at all. No background image appears. Is this too good to be true? Can you post your working examples?

#rightCol {
float:left;
width:210px;
margin:0 0 0 1px;
font-size:11px;
margin-top: 5px;
background-image: url(‘http://www.mysite.com/images/bg.png
background-repeat: reapeat-y no-repeat;
background-position: top center;
}
Brendan Monahan

My solution to ensuring my background image does not repeat in the emails I send to Gmail users is as follows:

1. Complete your email and add the background image no repeat code…

This will ensure your image does not repeat in all other email clients except Gmail.

2. Measure the height of your email. If you see it is 1000 pixels tall, then make your background image 1100 pixels tall. Gmail will only show the first 1000 pixels and thus will not repeat the image.

My background images are typically only 300 pixels tall, so I just make the bottom 800 pixels just white space.

Cheers!
Paco Loco

GurlS – you have a typo in the word repeat in your code.
Paco Loco

A couple of problems I have discovered with all this:

Regarding Travis’ original post, this works for me in that I can see the background images in Outlook 2007, however it does not actually respect the no-repeat value no matter what I do and repeats both in x and y.
Has anyone managed to get it to not repeat?

Regarding Mike’s fix for getting backgrounds to work both in Outlook 2007 and Gmail, I cannot get this working at all. Having looked at the source code it would seem that gmail strips out the background image css completely from the div.
Has anyone actually got this working?
Paco Loco

P.S. Another problem I just noticed with the gmail background image fix:
If you specify the same background image in the body and also in a div, some email clients (e.g. I’ve just seen thunderbird do this) will display both background images.
Keith Willoughby

Great tip.

It works in 2007, but not in Outlook 2003 anymore. I swear I had it working in both? If I hit “forward” the background appears. Any suggestions? Did something recently change in 2003?

I have it in a style as follows:

body {
background-image: url(‘http://www.xyz.com/bg.jpg‘);
background-repeat: repeat-y no-repeat;
background-position: top center;
background-color: #ffffff;
}
Keith Willoughby

I should note that I’m using IE to get it into Outlook. I’m trying to come up with some templates people can send without using Campign Monitor.

File –> Send –> Page by E-mail…
Keith Willoughby

Well, I think I have it narrowed down. Outlook 2003 is acting quirky, but I did get it to work by putting an additional background= tag in the . It’s still hit or miss depending on who’s Outlook it’s sent from though.
Rich

I’ve not been able to get a background image to appear in Outlook 2007 at all, let alone Gmail.

Has anyone got an example file to use as the signature .htm?
Sudy

Not working in Outlook 2007. I’ve a logo of dimension 207×80 and I’ve placed it as a background image but it’s repeating in Outlook 2007.

I’ve designed it from Dreamweaver 8 and when I preview this page the bg image is fine at top left corner. But when I use this page from Outlook stationery the background image is repeating.

My code:

Not working at all
Sudy

Not working in Outlook 2007. I’ve a logo of dimension 207×80 and I’ve placed it as a background image but it’s repeating in Outlook 2007.

I’ve designed it from Dreamweaver 8 and when I preview this page the bg image is fine at top left corner. But when I use this page from Outlook stationery the background image is repeating.

My code:

Not working at all
screensaver maker

the fastest and most powerful tool which lets you make your own screen saver or slide show presentations in minutes.
feersumendjinn

This doesnt work in 2007 – Thank you Microsoft for keeping email marketing and HTML emails in the dark ages…
Dana

my code is working…it just repeats the background multiple times…I need for it to only show up once…I plugged in this code:

and still shows up mutiple times!!

background-repeat: repeat-y no-repeat;
background-position: top center;
zverek

Thanks much!!!

Body background images & Outlook 2007

Join 150,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.