Header Image not Showing/loading in Gmail

I started with a CM template to create my e-letter. What I have done looks great and behaves as expected in all of my test mailing except Gmail. The header image does not load. I looked everywhere for answers and have found nothing that works. the img { display: block; } solution is not fruitful. I have tried all sorts of tweaks to the css. I've tried put the styles inline myself rather than letting CM convert my code.

Please note it is only the header.jpg image which is placed in the template that does not load in Gmail. The other graphic I have placed in the campaign mail itself loads fine.

Help, somebody! Here is the link to the letter on the web so you can see what it is supposed to look like:
http://designcorps.createsend2.com/T/ViewEmail/r/57C847BD81838B4E

Here is my code:

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Design Corps Special Communicator</title>
   <style type="text/css" media="screen">
      body {
         margin: 0;
         padding: 0;
         background-color: #ffffff;
      }

      td.permission {
         padding: 20px;
      }

      td.permission p {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 10px;
         font-weight: normal;
         color: #151515;
      }

      td.permission p a {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 10px;
         font-weight: normal;
         color: #a72323;
      }

      td.header {
        background-image: url(header.jpg);
        background-repeat: no-repeat;
        background-position: center top;
        background-color: f8eed3;
        height: 565px;
      }

      td.header h1 {
         font-family: Georgia, serif;
         font-size: 30px;
         font-weight: normal;
         color: #333333;
         margin-left: 50px;
         margin-bottom: 24px;
      }

      table.content {
         background-color: #f8eed3;
      }

      td.border {
         border-right: 2px solid #cac1a5;
      }

      td.mainbar a {
        font-family: 'Lucida Grande', sans-serif;
        font-size: 12px;
        font-weight: bold;
        color: #6e6e47;
        text-decoration: none;
      }
      
      td.mainbar h2 {
         font-family: Impact, Charcoal, sans-serif;
         font-size: 20px;
         font-weight: normal;
         text-align: center;
         text-transform: uppercase;
         letter-spacing: 0.1em;
         color: #986828;
         margin: 15px 0 0 0;
         padding: 0 0 0 0;
      }

      td.mainbar h2 a {
         font-size: 20px;
         font-weight: normal;
         color: #a69d7c;
      }

      td.mainbar h3 {
         font-family: Impact, Charcoal, sans-serif;
         font-size: 16px;
         font-weight: normal;
         color: #333333;
         margin: 10px 0 14px 0;
         padding: 0;
      }

      td.mainbar p {
        font-family: 'Lucida Grande', sans-serif;
        font-size: 12px;
        font-weight: normal;
        color: #333333;
        margin: 0;
        padding: 0;
        line-height: 18px;
        text-indent: 20px;
        padding: 0 90px 0 90px;

      }

      td.mainbar p.top {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 10px;
         font-weight: bold;
         color: #6e6e47;
         margin: 0 0 30px 0;
         padding: 0;
      }

      td.mainbar p.top a {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 10px;
         font-weight: bold;
         color: #6e6e47;
      }

      td.mainbar ul {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 12px;
         font-weight: normal;
         color: #333333;
         margin: 0 0 20px 24px;
         padding: 0;
      }

      td.mainbar ul li {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 12px;
         font-weight: normal;
         color: #333333;
         margin: 0 0 20px 24px;
         padding: 0;
      }


      td.footer {
         padding: 20px 0 20px 0;
      }

      td.footer p {
         font-family: 'Lucida Grande', sans-serif;
         font-size: 10px;
         font-weight: normal;
         color: #151515;
      }
   </style>
</head>
<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#a69d7e">
   <tr>
      <td align="center">
         
         <table width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
               <td width="580"  border="0" align="center" class="permission">
                  <p>Having trouble reading this email?
                    <webversion>View it on your browser</webversion>.</p>
              </td>
           </tr>
            <tr>
               <td class="header" align="center" valign="bottom"></td>
           </tr>
            <tr>
               <td>
                  <table width="700" height="100" border="0" cellspacing="14" cellpadding="0" class="content">
      <tr>
               <td class="mainbar" align="left" valign="top" width="672">                           
                           <repeater toc='true'>
                              <p><$title link='true' default='Enter your title'$></p>
                  <$description default='<p>Enter your description</p>'$>
                              <img src="<$imagesrc link='true'$>" alt="Inline Image" width="672" height="366" border="0" align="center" />
                              <p class="top"><a href="#top">back to top</a> <img src="top-arrow.gif" alt="Back to top" width="8" height="8" /></p>
                           </repeater>
                           
                </td>
                    </tr>
                 </table>
              </td>
            </tr>
         </table>
<table width="646" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td><img src="footer-tail.jpg" alt="Footer" width="778" height="87" /></td>
        </tr>
            <tr>
               <td class="permission" align="center">
                  <p>You're receiving this newsletter because you either: 1) subscribed to <em>Design Corps Communicator</em> via subscription link; 2) permitted us to add you to the subscription list, or; 3) in the normal course of business or personal communication with Dan van Loon or John Wollinka,  you provided an email address signifying your permission to be contacted via email.</p>
                 <p>Not interested in getting <em>Design Corps Communicator</em> anymore?
                    <unsubscribe>Unsubscribe Instantly</unsubscribe>
                 .</p>
              </td>
            </tr>
<tr>
               <td align="center" class="footer"><p>Copyright 2010. Design Corps<br />
          517 Church Street, Batavia, IL 60510<br>
               Ph: 630-761-9650</p></td>
            </tr>
         </table>
      </td>
   </tr>
</table>

</body>
</html>

Diana Diana, 6 years ago

Hi,

Is your code the URL you posted or the code you posted here? They don't seem to match. In the code you posted here your header is a CSS background image, which Gmail doesn't support. That would be why it isn't loading. You'd want to have it as an HTML img src tag and then it should be fine.

It does appear to be an html image in the link you posted, though. Is it still not working even with that code?


~*~~*~~*~~*~
D. Potter
Campaign Monitor
dcorpsmen, 6 years ago

Hello Diana. Yep. It is all working now. By the time you investigated the situation I had figured it out as you saw when you viewed the source code for the latest version of our email. I'm not a programmer, but a designer. So, I was pretty proud of m'self when I came up with that solution.

Does CM update the templates on a regular basis to insure compatibility with the latest email clients? It seems Google keeps everybody on their toes.

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