CODEWITHSUNDEEP
htmlemailbackground-imagehtml-email
JordanMiguel
JordanMiguel

Reputation: 740

HTM Email background image not displaying on outlook

My email build is using the well-known bulletproof background images that campaign monitor have kindly created. This ensures that these images render on various versions of outlook.

Although I'm using the correct HTML & VML code supplied, once testing my email it still does not render the background images on outlook.

I'm currently at my wit's end with this, the code looks perfect. If there's something that doesn't look right please let me know. 

<td background="https://image.ibb.co/dp5R4p/herobg.png" bgcolor="#7bceeb" width="640" valign="top">
  <!--[if gte mso 9]>
  		<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;">
    	<v:fill type="tile" src="https://image.ibb.co/dp5R4p/herobg.png" color="#7bceeb" />
    	<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
  	<![endif]-->
  <div>
    <table width="640" border="0" cellspacing="0" cellpadding="0" class="MainTable" style="width:640px; margin:0 auto;" align="center">
      <tbody>
        <tr>
          <td style="padding:0px 0px 0px 0px;" class="padding-top-10" align="center">
            <a href=""><img src="https://image.ibb.co/dvzyue/herocta.png" alt="hero offer" width="600" class="width-100" style="width:600px;" border="0"></a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <!--[if gte mso 9]>
    </v:textbox>
  	</v:rect>
  	<![endif]-->
</td>

Upvotes: 1

Views: 3549

Answers (1)

K K
K K

Reputation: 197

You've removed the height from the original code. I'm guessing that was for responsiveness, but the VML will only show up on Outlook Desktop, so it doesn't need to be responsive. Outlook needs the height to hold the shape open.

Upvotes: 3

Related Questions