0

I have a HTML email in sales force marketing cloud.

The email consist of a table with background image. the email looks good in the preview but once send the table - background image is not displaying in outlook but the email is rendering fine in gmail. the html code is as below

<table align="left" background="http://image.email.resmed.com.au/lib/fe8f13727c64037e71/m/1/fa3cd486-d5b8-4b85-872c-29a682e87fe5.jpg" valign="top" width="100%">
<tr>
  <td style="padding:30px 30px 30px 30px">
      <table align="left" style="background-color:rgba(255,255, 255, 1);padding:30px 30px 30px 30px" valign="top" width="50%">
       <tr>
         <td style="color: rgb(0, 134, 197);font-family:Arial;"> ACTIVATE NOW TO EARN</td>
       </tr>
      </table>
  </td>
</tr>
</table> 

Kindly help!

New HTML after edits based on answer below: (still having issues)

<table align="left" valign="top" width="600" background="image.email.resmed.com.au/lib/fe8f13727c64037e71‌​/m/1/…; 
  <!--[if gte mso 9]> <v:rect style="width:600px;height:auto" strokecolor="none">
    <v:fill type="tile" src="image.email.resmed.com.au/lib/fe8f13727c64037e71/m/1/…; />
    </v:fill>
  </v:rect>
  <v:shape id="NameHere" style="position:absolute;width:600x;height:auto">
<![endif]-->
  <tr>
   <td style="padding:30px 30px 30px 30px">
      <table align="left" style="background-color:rgba(255,255, 255, 1);padding:30px 30px 30px 30px" valign="top" width="50%">
       <tr>
         <td style="color: rgb(0, 134, 197);font-family:Arial;">ACTIVATE NOW TO EARN</td>
        </tr>
      </table>
    </td>
  </tr>
<!--[if gte mso 9]>
</v:shape>
<![endif]-->
</table> 

Thanks Suraksha G B

4

As you have not posted your code, I do not know for sure, but this is likely due to Outlook not supporting bgimage or background image CSS.

The prime culprit seems to be Outlook 07/10/13, which does not support either table background email images or background-image styles.

To combat this, you will need to use a microsoft language called VML (Vector Markup Language)

The easiest way to accomplish this is by using an awesome tool Stig has created: https://backgrounds.cm/

This will help you with setting up a 'bulletproof background' for Outlook and more.

Sample of the code:

<td background="https://i.imgur.com/YJOX1PC.png" bgcolor="#7bceeb" width="120" height="92" valign="top">
  <!--[if gte mso 9]>
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:120px;height:92px;">
      <v:fill type="tile" src="https://i.imgur.com/YJOX1PC.png" color="#7bceeb" />
       <v:textbox inset="0,0,0,0">
  <![endif]-->
  <div>
         <!-- YOUR CONTENT -->
  </div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>

EDIT

Based on your new code, I believe what you are trying to do is the below:

<table align="left" valign="top" width="600">
<tr>
  <td style="padding:30px 30px 30px 30px">
      <table align="left" style="background-color:rgba(255,255, 255, 1);padding:30px 30px 30px 30px" valign="top" width="50%">
       <tr>
         <td background="http://image.email.resmed.com.au/lib/fe8f13727c64037e71/m/1/fa3cd486-d5b8-4b85-872c-29a682e87fe5.jpg" width="50%" valign="top" style="rgb(0, 134, 197); font-family:Arial;">
  <!--[if gte mso 9]>
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:{{YourWidth}}; height:{{YourHeight}};">
      <v:fill type="tile" src="http://image.email.resmed.com.au/lib/fe8f13727c64037e71/m/1/fa3cd486-d5b8-4b85-872c-29a682e87fe5.jpg" color="#7bceeb" />
       <v:textbox inset="0,0,0,0">
  <![endif]-->
ACTIVATE NOW TO EARN
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>
       </tr>
      </table>
  </td>
</tr>
</table> 

You would just need to add the width/height in defined px into the VML for Outlook to render.

  • here is my html email code. <table align="left" background="image.email.resmed.com.au/lib/fe8f13727c64037e71/m/1/…" valign="top" width="100%"> <tr> <td style="padding:30px 30px 30px 30px"> <table align="left" style="background-color:rgba(255,255, 255, 1);padding:30px 30px 30px 30px" valign="top" width="50%"> <tr> <td style="color: rgb(0, 134, 197);font-family:Arial;"> ACTIVATE NOW TO EARN</td></tr></table> </td></tr></table> – Suraksha G B Nov 6 '17 at 5:59
  • i used the way which is suggested but the images still not rendering fine. kindly help! – Suraksha G B Nov 6 '17 at 6:03
  • can you provide more details into what you mean by 'not rendering fine'. Have you checked image blocking settings on Outlook? – Gortonington Nov 6 '17 at 13:24
  • i have tried with changing the outlook setting for automatic download but still the background image given for the table tag is not displaying in the email. kindly help – Suraksha G B Nov 7 '17 at 4:08
  • can you provide the code you are now using (after utilizing the above solution)? You can just edit your question to include the new code in it. – Gortonington Nov 7 '17 at 13:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.