Body background images & 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.

Posted by Administrator

37 Comments

  • Wayde Christie
    7th July

    Handy indeed.

    Cheers.

  • Peter van den Heuvel
    8th July

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

    Thank you!  Thank you!  Thank you!

  • Nathanael
    8th July

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

  • Rylan
    8th July

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

  • Anna Yeaman
    8th July

    Cool work around Travis!

  • Mike Causer
    8th July

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

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

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

  • Andy
    9th July

    Why this is a tremendous fine. Good job!

  • Andy
    9th July

    Good find, thanks chaps.

  • Martijn de Valk
    9th July

    Good Job! I could realy use this one!

  • Yannick Schall
    9th July

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

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

  • Yannick Schall
    10th July

    [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
    10th July

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

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

    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(background.gif); background-repeat:repeat-y; background-position:left top;”]
    [div style=“height:100%; margin:0; padding:0; background-image:url(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
    17th July

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

  • Andrea
    18th July

    Is yours a reply to my post?

  • Aecio Lemos
    23rd July

    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

    <a href=“http://www.vlswebcom.br/” rel=“nofollow”>http://www.vlswebcom.br/</a>

     

     

  • bobo
    30th July

    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/background.gif);

    that should help you out a bit….

  • GurlS
    9th August

    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
    26th August

    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
    3rd September

    GurlS - you have a typo in the word repeat in your code.

  • Paco Loco
    3rd September

    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
    3rd September

    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
    3rd September

    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
    3rd September

    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
    3rd September

    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
    20th September

    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
    18th November

    Not working in Outlook 2007. I’ve a logo of dimension 207x80 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
    18th November

    Not working in Outlook 2007. I’ve a logo of dimension 207x80 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
    25th November

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

  • feersumendjinn
    4th December

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

  • Dana
    4th December

    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
    6th December

    Thanks much!!!

Sign up for free.
Then send campaigns for as little as $9/month

Create an account