For all the email coders out there, you’ll know what a pain it is to get background images to work in Outlook. There have been a couple of workarounds for a while now, below is the method I have often used:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
background-image: url('http://www.mailm.co.uk/bg.png');
background-repeat: repeat-y no-repeat;
background-position:center;
background-position:top;
background-color: #FFFFFF;
margin: 0;
padding: 0;
}
.ReadMsgBody { width: 100%;}
.ExternalClass {width: 100%;}
</style>
<title>Mailing Manager Test</title>
</head>
<body topmargin="0" style="margin:0; padding:0; width:100%; background-color: #FFFFFF; background:url(http://www.mailm.co.uk/bg.png); background-repeat:repeat;"  background="http://www.mailm.co.uk/bg.png">
<table align="center" cellpadding="0" cellspacing="0" width="100%"  style="background:url(http://www.mailm.co.uk/bg.png); background-repeat:repeat; background-position:top;"  background="http://www.mailm.co.uk/bg.png" >

This works well, however it’s a bit heavy and overly elaborate. This was created simply through trial and error hence the complete nonsense which is repeat-y no-repeat; I’m still really sure how it works, but it does and that’s the main thing.
I’ve always understood that the best way to get backgrounds to work in Outlook is to use VML, but never really got my head around this. Thankfully some bright spark has come up with a generator that will provide you with the code you need. You just need to set a couple of parameters using the nifty tool. Visit Bulletproof Email Backgrounds – http://emailbg.net/ and check it out. Here is the code that it produced for my body background.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.ReadMsgBody { width: 100%;}
.ExternalClass {width: 100%;}
</style>
<title>Mailing Manager Test</title>
</head>
<body>
<div style="background-color:#f6f6f6;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="http://www.mailm.co.uk/bg.png" color="#f6f6f6"/>
</v:background>
<![endif]-->
<table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" align="left" background="http://www.mailm.co.uk/bg.png">

It’s much, much easier to manage this and works flawlessly in all email clients. You can also generate code for a background image in a table cell which is also great news as this is something we couldn’t achieve previously.

About