Hi,
I’m making an HTML newsletter for a client (via MailChimp), and I have hit a small snag.
I can get the background image to show on most e-mail clients except Outlook 2007/2010.
I’ve used the CSS/table hack, but it doesn’t want to work. If I apply the background image to the <body> tag shows up fine, but as you see below I have it on a nested <td> with no go (I even tried it on the parent and child <table> as well with the same result).
I can guess what the response will be, but the fact I can get it show on an element (albeit the wrong one) I wanted to see if anyone notices an error with my code.
Thanks! 
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>*|MC:SUBJECT|*</title>
<style type="text/css" media="screen">
/* NOTE: CSS should be inlined to avoid having it stripped in certain email clients like GMail.
MailChimp automatically inlines CSS for you or you can use this tool: http://www.mailchimp.com/labs/inlinecss.php. */
body {
background-color: #30333e;
text-align:center;
line-height:14px;
}
p {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
margin:5px auto 0;
line-height:1.4em;
color:#442513;
}
p.small {
font-size:12px;
color:#381704;
margin:0 auto 5px auto;
}
a, a:link, a:visited {
color: #9e0b0f;
text-decoration: none;
font-weight: bold;
font-family:Arial, Helvetica, sans-serif;
}
img {margin:0; padding:0; display:block;}
#top-mouse-type {
background-color: #30333e;
text-align:center; font-family: Georgia;
}
#top-mouse-type p {
color:#b8bfd4;
}
#newsletter {
width:100%;
background-color: #30333e;
text-align:center;
line-height:14px;
}
#layout {
border: 1px solid #ffffff;
background:#ffffff;
margin: 0 auto;
font-family: Georgia;
text-align:center;
}
#header {
background-image: url('http://gallery.mailchimp.com/path/to/image.jpg');
background-repeat: repeat-y no-repeat;
margin:0;
padding:0;
background-color: #f2eee5;
color: #333333;
font-size: 30px;
font-family: Georgia;
text-align: center;
line-height:24px;
}
.caption {
color:#777777;
font-style: italic;
font-family: Georgia;
}
#subheader {
background-color:#32292a;
background-position: 0 0;
background-repeat:no-repeat;
padding: 0px;
color: #a59581;
font-size: 16px;
text-align: center;
margin:0;
line-height:70px;
height:80px;
}
#subheader p {
color: #a59581;
font-family: Verdana, sans-serif;
font-weight:bold;
text-align:center;
line-height:20px;
margin:0 auto 0;
}
table#white-border {
border-left:1px solid #c1bfba;
border-right:1px solid #c1bfba;
border-bottom:1px solid #c1bfba;
padding: 0 0 3px 0;
margin:0 auto;
text-align:center;
background-color:#F2EEE5;
}
#white-border img, img.border {
border:1px solid #fff;
margin:0 auto;
padding:0;
text-align:center;
}
#white-border img.logo {border:none;}
#white-border a {
font-size:14px;
font-weight:bold;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
}
#subscribe-info, #top-mouse-type {
font-family:Georgia, "Times New Roman", Times, serif;
color:#b8bfd4;
line-height:1.4em;
font-size:12px;
text-align:center;
width:500px;
margin:0 auto;
}
#subscribe-info a, #top-mouse-type a {color:#ffffff; text-decoration:none;}
#subscribe-info p {color:#b8bfd4; font-family: Georgia;}
</style>
</head>
<body>
<table id="newsletter">
<tr>
<td id="top-mouse-type">
<p class="small">Having trouble viewing this message? Click <a href="*|ARCHIVE|*" class="adminText" target="_blank">here</a> to see it on the web.</p>
</td>
</tr>
<tr>
<td>
<table id="layout" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td id="header" height="555" width="598" background="http://gallery.mailchimp.com/path/to/image.jpg">
<table border="0" cellspacing="0" cellpadding="0" width="598">
<tr>
<td height="225" class="top" valign="middle" mc:edit="top" align="center">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper eleifend dapibus. Fusce vel dolor pulvinar nunc vehicula imperdiet quis in mauris. Morbi feugiat blandit sem, in rutrum dui rutrum ut. Aliquam erat volutpat. Ut orci sem, auctor feugiat rutrum sed, dignissim quis dui.</p>
</td>
</tr>
<tr>
<td height="330" class="bottom" valign="bottom" mc:edit="bottom" align="center">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper eleifend dapibus. Fusce vel dolor pulvinar nunc vehicula imperdiet quis in mauris. Morbi feugiat blandit sem, in rutrum dui rutrum ut. Aliquam erat volutpat. Ut orci sem, auctor feugiat rutrum sed, dignissim quis dui.</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-bottom:7px;">
<table id="white-border" width="584" align="center">
<tr bgcolor="#F2EEE5">
<td width="480" class="intro" mc:edit="intro" style="margin-top:20px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ullamcorper eleifend dapibus. Fusce vel dolor pulvinar nunc vehicula imperdiet quis in mauris. Morbi feugiat blandit sem, in rutrum dui rutrum ut. Aliquam erat volutpat. Ut orci sem, auctor feugiat rutrum sed, dignissim quis dui.</p>
</td>
</tr>
<tr>
<td colspan="3">
<p><img src="http://gallery.mailchimp.com/path/to/image.jpg" width="188" height="68" alt="company logo" class="logo"></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table id="subscribe-info">
<tr>
<td>
<p style="font-family:Georgia; color:#B8BFD4;"><br />Email: <a href="mailto:email@company.com">email@company.com</a> or follow us on <a href="http://www.facebook.com/company">Facebook</a> or <a href="http://twitter.com/company">Twitter</a>.<br>*|LIST:ADDRESS|*<br>*|LIST:DESCRIPTION|*<br>Don't want these emails? Just <a href="*|UNSUB|*">unsubscribe</a>.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
