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.