+ Start a Discussion
Robert WynterRobert Wynter 

image repeat on gmail and hotmail only

The image works perfectly well in outlook but in Gmail it the image overlaps. The source of the image is reading from a file I FTP into Marketing cloud. The file is read, via ampscript on a Dynamic email content template and this sections of the email image is a web link to the image.

.headerImage {
                                        -webkit-background-size: cover;
                                        -moz-background-size: cover;
                                        -o-background-size: cover;
                                        background-size: cover;
                                        background-position: center top;
                                        background-repeat: no-repeat center;
                                       
                                      }
 
Which is being used in my td tag
 
                   <td background="%%=v(@ColumnHeaderPic)=%% " class="container headerImage" height="313" width="600">
                    <!--[if gte mso 9]>           <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:275px;">             <v:fill type="frame" src="%%=v(@ColumnHeaderPic)=%%" />             <v:textbox inset="0,0,0,0">           <![endif]-->

RESULT:
User-added image
Robert WynterRobert Wynter
Came up with a solution for Gmail. I don't know if it's MC or Gmail that has this limitation but apparently, the style must be added to the table cell <td background="%%=v(@ColumnHeaderPic)=%% " class="container headerImage" height="313" style="background-repeat:no-repeat;" width="600">. this only works for Gmail and not Hotmail or Outlook I still need to use my CSS thor those. very frustrating
Robert WynterRobert Wynter
I fixed my issue by breaking up into different layouts so that I can concentrate on each section on its own. I managed to get it to work with webmail now with Yahoo and Gmail on desktop/Mobile but now my Outlook is messed up I cannot get the image to display.missing image over black banner
 
<style type="text/css">
ReadMsgBody{
    width: 100%;
  }
  .ExternalClass {
    width: 100%;
  }
  .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
    line-height: 100%;
  }
  body {
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  p {
    margin: 1em 0;
  }
  table td {
    border-collapse: collapse !important;
    mso-table-lspace: 0pt;
    mso-table-rspace: 0pt;
  }
  table {
    width: 600px !important;
    min-width: 300px !important;
  }
  img {
    outline:0;
  }
  a img {
    border:none;
  }
  p {
    margin: 1em 0;
  }
  @-ms-viewport{
    width: device-width;
  }
  @media only screen and (max-width: 480px) {
    .container {
      width: 100% !important;
    }
    .footer {
      width:auto !important;
      margin-left:0;
    }
    .content-padding{
      padding:4px !important;
    }
    .mobile-hidden {
      display:none !important;
    }
    .logo {
      display:block !important;
      padding:0 !important;
    }
    img {
      max-width:100% !important;
      height:auto !important;
      max-height:auto !important;
    }
    .header img{
      max-width:100% !important;
      height:auto !important;
      max-height:auto !important;
    }
    .photo img {
      width:100% !important;
      max-width:100% !important;
      height:auto !important;
    }
    .drop {
      display:block !important;
      width: 100% !important;
      float:left;
      clear:both;
    }
    .footerlogo {
      display:block !important;
      width: 100% !important;
      padding-top:15px;
      float:left;
      clear:both;
    }
    .nav4, .nav5, .nav6 {
      display: none !important;
    }
    .tableBlock {
      width:100% !important;
    }
    .responsive-td {
      width:100% !important;
      display:block !important;
      padding:0 !important;
    }
    .fluid, .fluid-centered {
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
    .fluid-centered {
      margin-left: auto !important;
      margin-right: auto !important;
    }
    /* MOBILE GLOBAL STYLES - DO NOT CHANGE */
    body {
      padding: 0px !important;
      font-size: 16px !important;
      line-height: 150% !important;
    }
    h1 {
      font-size: 22px !important;
      line-height: normal !important;
    }
    h2 {
      font-size: 20px !important;
      line-height: normal !important;
    }
    h3 {
      font-size: 18px !important;
      line-height: normal !important;
    }
    .buttonstyles {
      font-family:arial,helvetica,sans-serif !important;
      font-size: 16px !important;
      color: #FFFFFF !important;
      padding: 10px !important;
    }
    /* END OF MOBILE GLOBAL STYLES - DO NOT CHANGE */
  }
  @media only screen and (max-width: 640px) {
    .container {
      width:100% !important;
    }
    .mobile-hidden {
      display:none !important;
    }
    .logo {
      display:block !important;
      padding:0 !important;
    }
    .photo img {
      width:100% !important;
      height:auto !important;
    }
    .nav5, .nav6 {
      display: none !important;
    }
    .fluid, .fluid-centered {
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
    .fluid-centered {
      margin-left: auto !important;
      margin-right: auto !important;
    }
  }
  @media only screen and (max-width: 599px) {
    table {
      width: 100%;
    }
    td[class=container] {
      background-size: 100% 100%;
      background-position: center top;
      width: 100%;
      height: 100%;
      min-height: 200px;
      padding-top: 100px !important;
    }
    td[class=spacer] {
      display: none;
      height: 0;
    }
  }
  h1 {
    color: white;
    font-family:arial,helvetica,sans-serif;
    font-size: 12px;
    margin:0px;
    padding: 0px;
  }
  h2 {
    font-style: arial,helvetica,sans-serif;
    font-size:12px;
    color: white;
    margin:0px;
    padding: 0px;
  }
  h3 {
    color: #008265;
    font-size: 16px;
    font-style: Arial;
  }
  h4 {
    color: #008265;
    font-size: 13px;
    font-style: Arial;
  }
  h5 {
    color: #008265;
    font-size: 12px;
    font-style: Arial;
  }
  h6 {
    color: #008265;
    font-size: 10px;
    font-style: Arial;
  }
  body {
    font-size: 12px;
    font-style: Arial;
    color: #000;
  }
  p.uppercase {
    text-transform: uppercase;
  }
  p {
    color: black;
    font-family:arial,helvetica,sans-serif;
    font-size: 12px;
    margin:0px;
    padding: 0px;
    Margin-top: 5px;
  }
  ul {
    color: black;
    font-family:arial,helvetica,sans-serif;
    font-size: 12px;
    margin-left: -25px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .logoLine {
    height:40px;
    width:29px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    text-align: right;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin: 0px;
    padding: 0px;
    float: right;
  }
  .headerImage {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
  }
  span {
    font-family: arial, helvetica, sans-serif;
    font-size: 12px;
  }
  ul {
    color: black;
    font-family:arial,helvetica,sans-serif;
    font-size: 12px;
    padding: 0;
    margin: 10px 0 10px 0;
  }
  li{
    margin: 2px 0 6px 0;
    mso-margin-bottom-alt:0px;
    margin-left: 18px;
  }</style><style type="text/css">
@media only screen and (max-width: 480px){
    #templateColumns{
      width:100% !important;
    }
    .templateColumnContainer{
      display:block !important;
      width:100% !important;
    }
    .columnImage{
      height:auto !important;
      max-width:480px !important;
      width:100% !important;
    }
    .leftColumnContent{
      font-size:16px !important;
      line-height:125% !important;
    }
    .rightColumnContent{
      font-size:16px !important;
      line-height:125% !important;
    }
  }</style><table cellpadding="0" cellspacing="0" class="stylingblock-content-wrapper" width="100%">
 
  <tr align="left">
   <td background="%%=v(@ColumnHeaderPic)=%% " class="container headerImage" height="313" style="background-repeat: no-repeat;border-collapse: collapse;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-position: left bottom;mso-line-height-rule:exactly;" valign="bottom" width="600">
    <table cellpadding="0" cellspacing="0" style="width: 600px !important;min-width: 300px !important;">
     
      <tr>
       <td class="spacer" height="229" style="border-collapse: collapse;display: none;height: 0;">
       </td></tr><tr>
       <td align="left" class="inner-container" height="30" style="background-color: black;background: rgba(30,30,30,0.7);border-collapse: collapse;" valign="top" width="600">
        <table cellpadding="0" cellspacing="0" style="width: 600px !important;min-width: 300px !important;">
         
          <tr>
           <td align="bottom" style="font-family: arial,sans-serif;font-size: 16px;line-height: 22px;color: #fff;border-collapse: collapse;">
            <table style="width: 600px !important;min-width: 300px !important;">
             
              <tr align="left">
               <td align="top" style="border-collapse: collapse;">
                <font color="#000000" face="Times New Roman"><span style="font-family: arial, helvetica, sans-serif;font-size: 12px;"><span style="font-family: arial, helvetica, sans-serif;font-size: 12px;">&nbsp; &nbsp;</span></span> </font> <img class="logoLine" data-assetid="7253" height="40" src="http://image.info-durhamcollege.ca/lib/fe8c13727d6c007f71/m/1/610ae344-5e71-41c5-be5e-cc22ad45b5f8.png" style="outline: 0;height: auto !important;width: 29px;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;text-align: right;margin: 0px;padding: 0px;float: right;max-width: 100% !important;max-height: auto !important;" width="29"></td><td align="top" style="text-transform: uppercase;color: white;border-collapse: collapse;">
                <h1 style="line-height: 1;font-size: 12px;color: white;font-family: arial,helvetica,sans-serif;margin: 0px;padding: 0px;">
                 <font color="white" face="Times New Roman"><span style="font-weight: normal;text-transform: none;font-family: arial, helvetica, sans-serif;font-size: 12px;">%%=v(@Program)=%%</span> </font></h1><h2 style="font-size: 12px;font-style: arial,helvetica,sans-serif;color: white;margin: 0px;padding: 0px;line-height: normal !important;">
                 <font color="white" face="Times New Roman"><span style="font-weight: normal;text-transform: none;font-family: arial, helvetica, sans-serif;font-size: 12px;">%%=v(@ColumnSemester)=%% SEMESTER %%=v(@ColumnCredential)=%% %%[ IF NOT EMPTY(@ColumnSemester2) THEN ]%% / %%=v(@ColumnSemester2)=%% SEMESTER %%=v(@ColumnCredential2)=%% %%[ ENDIF ]%%</span> </font></h2></td></tr></table></td></tr><tr>
          </tr></table></td></tr></table></td></tr></table>

 
Robert WynterRobert Wynter
Line 322 is where the image is located within the TD tag. I know I can somehow use Ghost Columns for Outlook but I'm having trouble wrapping my head around it after researching examples.
Robert WynterRobert Wynter
Once I added a blank TR with spacers before the first TR this resolved my issue
<tr>
       <td class="spacer" height="229">
       </td>
</tr>