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, 5 years ago

Excuse my typo in the heading! Outlook...

roshodgekiss roshodgekiss, 5 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

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free