Outtlook 2007 removing header image, but displaying other images?

Hello! I'm on to my second campaign, for this one I have edited one of the CM templates. The email seems to be showing properly in a range of programs, however someone accessing it via Outlook 2007 is not seeing the header image, but all other images are displaying correctly.  See: Website

Is there something I'm doing wrong in the code?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Email Template - Classic</title>
<style type="text/css">
a:hover { text-decoration: underline !important; }
.issue p {font-size: 36px; font-family: Georgia, Times, serif; color: #585956; margin-top: 0px; margin-bottom: 0px; text-shadow: 1px 1px 1px #333;}
.title h1 { color: #333 !important; margin-top: 0px; margin-bottom: 0px; font-weight: normal; font-size: 48px; font-family: Georgia, Times, serif }
.date p { font-size: 24px; font-family: Georgia,  Times, serif; color: #ffffff; margin-top: 0px; margin-bottom: 0px;}
.content h1 { font-size: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #585956 !important; margin-top: 0px; margin-bottom: 12px;}
.content p { font-size: 16px; line-height: 22px; font-family: Georgia, Times, serif; color: #585956; margin: 0px;}
.content a { color: #585956; text-decoration: none;}
.address p {font-size: 14px; line-height: 24px; font-family: Georgia, Times, serif; color: #929496; margin: 0px;}
</style>
</head>

<body marginheight="0" topmargin="0" marginwidth="0" style="margin: 0px; background-color: #f7f2e4;" bgcolor="#f7f2e4" leftmargin="0">
<!--100% body table-->
<table cellspacing="0" border="0" cellpadding="0" width="100%" bgcolor="#585956">
    <tr>
        <td>
            <!--top links-->
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td valign="middle" align="center" height="45">
                        <p style="font-size: 14px; line-height: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #f2f3f3; margin: 0px;">
                            Is this email not displaying correctly? <webversion style="color: #cd2879; text-decoration: none;">Try the web version.</webversion></p></td>
                        </tr>
                    </table>
                    <!--header-->
                    <table style="background:url(images/header-bg.jpg); background-repeat: no-repeat; background-position: center; background-color: #f2f3f3;" width="684" border="0" align="center" cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td valign="top" width="173">
                                            <!--ribbon--><!--ribbon-->
                                        </td>
                                        <td valign="middle" width="493" height="200"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                            <tr>
                                                <td height="60"></td>
                                            </tr>
                                            <tr>
                                                <td class="title">&nbsp;</td>
                                            </tr>
                                            <tr>
                                                <td height="40"></td>
                                            </tr>
                                        </table>
                                        
                                    </td>
                                    <td width="18"></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table><!--/header-->
                <!--email container-->
                <table bgcolor="#f2f3f3" cellspacing="0" border="0" align="center" cellpadding="30" width="684">
                    <tr>
                        <td>
                            <!--email content-->
                            <table cellspacing="0" border="0" id="email-content" cellpadding="0" width="624">
                                <tr>
                                    <td>
                                        <!--section 3-->
                                        <table cellspacing="0" border="0" cellpadding="0" width="100%">
                                            <tr>
                                                <td class="content">
                                                    <!--line break-->
                                                    <table cellspacing="0" border="0" cellpadding="0" width="100%">
                                                        <tr>
                                                            <td height="72"><img src="images/line-break-2.png" width="622" height="72" /></td>
                                                        </tr>
                                                    </table><!--/line break-->
                                                    <repeater>
                                                        <table cellspacing="0" border="0" cellpadding="0" width="100%">
                                                            <tr>
                                                                <td valign="top" width="378">
                                                                    <h1><singleline label="Title">Enter Title Here</singleline></h1>
                                                                <img align="right" alt="img8" style="margin: 0 0 10px 10px; /*border: solid 1px #FFF; box-shadow: 2px 2px 6px #333; -webkit-box-shadow: 2px 2px 6px #333; -khtml-box-shadow: 2px 2px 6px #333; -moz-box-shadow: 2px 2px 6px #333; */ float: right;" width="216" editable="true" label="Image" />
                                                                <multiline label="Description"><p>Enter content here.</p></multiline>
                                                                </td>
                                                            </tr>
                                                        </table>
                                                        <!--line break-->
                                                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                            <tr>
                                                                <td valign="bottom" height="50"><img src="images/line-break.jpg" width="622" height="27" /></td>
                                                            </tr>
                                                        </table><!--/line break-->
                                                    </repeater>

                                                    <table cellspacing="0" border="0" cellpadding="0" width="100%">
                                                        <tr>
                                                            <td height="72"><img src="images/line-break-2.png" width="622" height="72" />
                                                            </td>
                                                        </tr>
                                                    </table><!--/line break-->
                                                </td>
                                            </tr>
                                        </table><!--/section 3-->
                                    </td>
                                </tr>
                            </table><!--/email content-->
                        </td>
                    </tr>
                </table><!--/email container-->
                <!--footer-->
                <table width="680" border="0" align="center" cellpadding="30" cellspacing="0">
                    <tr>
                        <td valign="top">
                            <p style="font-size: 14px; line-height: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #f2f3f3; margin: 0px;">
                                <singleline label="Title">You are receiving this newsletter because you bought widgets from us.</singleline><br /> 
                                Not interested anymore? <unsubscribe style="color: #cd2879; text-decoration: none;">Unsubscribe.</unsubscribe></p>
                            </td>
                            <td valign="top" class="address" width="245"><multiline label="Description"><p>ABCWidgets Corp - 123 Some Street, City, ST 99999. ph +1 4 1477 89 745.</p></multiline>
                            </td>
                        </tr>
                        <tr>
                            <td height="30"></td>
                            <td height="30"></td>
                        </tr>
                    </table><!--/footer-->
                </td>
            </tr>
        </table><!--/100% body table-->
</body>
</html>

Thank you so much in advance!

tinmouse, 4 years ago

Excuse my typo in the heading! Outlook...

roshodgekiss roshodgekiss, 4 years ago

Hi tinmouse, thank you for writing in, plus your tweets earlier! The skinny is that Outlook 2007 / 2010 doesn't support background-image, therefore the header background image is not being displayed. That said, there is a little 'hack' for working around this - while it's not perfect, it will get the image to display. Here's the updated code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Email Template - Classic</title>
<style type="text/css">
a:hover { text-decoration: underline !important; }
.issue p {font-size: 36px; font-family: Georgia, Times, serif; color: #585956; margin-top: 0px; margin-bottom: 0px; text-shadow: 1px 1px 1px #333;}
.title h1 { color: #333 !important; margin-top: 0px; margin-bottom: 0px; font-weight: normal; font-size: 48px; font-family: Georgia, Times, serif }
.date p { font-size: 24px; font-family: Georgia,  Times, serif; color: #ffffff; margin-top: 0px; margin-bottom: 0px;}
.content h1 { font-size: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #585956 !important; margin-top: 0px; margin-bottom: 12px;}
.content p { font-size: 16px; line-height: 22px; font-family: Georgia, Times, serif; color: #585956; margin: 0px;}
.content a { color: #585956; text-decoration: none;}
.address p {font-size: 14px; line-height: 24px; font-family: Georgia, Times, serif; color: #929496; margin: 0px;}
</style>
</head>

<body marginheight="0" topmargin="0" marginwidth="0" style="margin: 0px; background-color: #f7f2e4;" bgcolor="#f7f2e4" leftmargin="0">
<!--100% body table-->
<table cellspacing="0" border="0" cellpadding="0" width="100%" bgcolor="#585956">
    <tr>
        <td>
            <!--top links-->
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td valign="middle" align="center" height="45">
                        <p style="font-size: 14px; line-height: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #f2f3f3; margin: 0px;">
                            Is this email not displaying correctly? <webversion style="color: #cd2879; text-decoration: none;">Try the web version.</webversion></p></td>
                        </tr>
                    </table>
                    <!--header-->
                    <table width="684" border="0" align="center" cellpadding="0" cellspacing="0">
                        <tr>
                            <td background="http://placehold.it/684x210" style="background-image: url(http://placehold.it/684x210); background-repeat: no-repeat;" >
    
<!--[if gte mso 9]>
<v:rect style="width:684px;height:210px;" strokecolor="none">
<v:fill type="frame" color="#f2f3f3" src="http://placehold.it/684x210" /></v:fill>
</v:rect>
<v:shape id="theText" style="position:absolute;width:684px;height:210px;">
<![endif]-->              
                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td valign="top" width="173">
                                            <!--ribbon--><!--ribbon-->
                                        </td>
                                        <td valign="middle" width="493" height="200"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                            <tr>
                                                <td height="60"></td>
                                            </tr>
                                            <tr>
                                                <td class="title">&nbsp;</td>
                                            </tr>
                                            <tr>
                                                <td height="40"></td>
                                            </tr>
                                        </table>

<!--[if gte mso 9]>
</v:shape>
<![endif]-->

                                    </td>
                                    <td width="18"></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table><!--/header-->
                <!--email container-->
                <table bgcolor="#f2f3f3" cellspacing="0" border="0" align="center" cellpadding="30" width="684">
                    <tr>
                        <td>
                            <!--email content-->
                            <table cellspacing="0" border="0" id="email-content" cellpadding="0" width="624">
                                <tr>
                                    <td>
                                        <!--section 3-->
                                        <table cellspacing="0" border="0" cellpadding="0" width="100%">
                                            <tr>
                                                <td class="content">
                                                    <!--line break-->
                                                    <table cellspacing="0" border="0" cellpadding="0" width="100%">
                                                        <tr>
                                                            <td height="72"><img src="images/line-break-2.png" width="622" height="72" /></td>
                                                        </tr>
                                                    </table><!--/line break-->
                                                    <repeater>
                                                        <table cellspacing="0" border="0" cellpadding="0" width="100%">
                                                            <tr>
                                                                <td valign="top" width="378">
                                                                    <h1><singleline label="Title">Enter Title Here</singleline></h1>
                                                                <img align="right" alt="img8" style="margin: 0 0 10px 10px; /*border: solid 1px #FFF; box-shadow: 2px 2px 6px #333; -webkit-box-shadow: 2px 2px 6px #333; -khtml-box-shadow: 2px 2px 6px #333; -moz-box-shadow: 2px 2px 6px #333; */ float: right;" width="216" editable="true" label="Image" />
                                                                <multiline label="Description"><p>Enter content here.</p></multiline>
                                                                </td>
                                                            </tr>
                                                        </table>
                                                        <!--line break-->
                                                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                            <tr>
                                                                <td valign="bottom" height="50"><img src="images/line-break.jpg" width="622" height="27" /></td>
                                                            </tr>
                                                        </table><!--/line break-->
                                                    </repeater>

                                                    <table cellspacing="0" border="0" cellpadding="0" width="100%">
                                                        <tr>
                                                            <td height="72"><img src="images/line-break-2.png" width="622" height="72" />
                                                            </td>
                                                        </tr>
                                                    </table><!--/line break-->
                                                </td>
                                            </tr>
                                        </table><!--/section 3-->
                                    </td>
                                </tr>
                            </table><!--/email content-->
                        </td>
                    </tr>
                </table><!--/email container-->
                <!--footer-->
                <table width="680" border="0" align="center" cellpadding="30" cellspacing="0">
                    <tr>
                        <td valign="top">
                            <p style="font-size: 14px; line-height: 24px; font-family: Georgia, 'Times New Roman', Times, serif; color: #f2f3f3; margin: 0px;">
                                <singleline label="Title">You are receiving this newsletter because you bought widgets from us.</singleline><br /> 
                                Not interested anymore? <unsubscribe style="color: #cd2879; text-decoration: none;">Unsubscribe.</unsubscribe></p>
                            </td>
                            <td valign="top" class="address" width="245"><multiline label="Description"><p>ABCWidgets Corp - 123 Some Street, City, ST 99999. ph +1 4 1477 89 745.</p></multiline>
                            </td>
                        </tr>
                        <tr>
                            <td height="30"></td>
                            <td height="30"></td>
                        </tr>
                    </table><!--/footer-->
                </td>
            </tr>
        </table><!--/100% body table-->
</body>
</html>

Feel free to remove the hack code if it causes any issues. Thanks, tinmouse - all the best with your campaign!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

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

Get started for free
1-888-533-8098