Paulette Vallad
Paulette Vallad

Reputation: 11

How to set a background image on table cell for html email in Outlook

Can anyone assist with how to set a background image on table cell (not for the body)for html email in Outlook? I have used these sources to add the VML/conditional comments in my markup to no avail. I have also used the Bulletproof background image generator. The image will not render in Outlook. What am I missing.

https://litmus.com/community/discussions/4860-background-images-in-outlook-2010

https://www.emailonacid.com/blog/article/email-development/emailology_vector_markup_language_and_backgrounds/

This is my code for the table & cell

<table class="win-num" width="100%" style="border-spacing:0;font-family:sans-serif;color:#333333;height:65px;" >
     <tr>       
        <td  align='center' valign='middle' style="margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;font-family:Trebuchet,Tahoma,Verdana,Arial,Helvetica,Lucida,sans-serif;color:#666666;font-size:17px;font-weight:bold;background-color:transparent;background-image:url('https://gallery.mailchimp.com/f04c0adc8ac8b923261014c4b/images/191f8d2f-544d-43c6-bff3-bc1e643e242f.png');background-repeat:no-repeat;background-position:center center;background-attachment:scroll;">
      <!--[if gte mso 9]>                                                          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:55px;height:55px;">
        <v:fill type="tile" https://gallery.mailchimp.com/f04c0adc8ac8b923261014c4b/images/191f8d2f-544d-43c6-bff3-bc1e643e242f.png" color="#1a4298" />                               <v:textbox inset="0,0,0,0">                                              <![endif]-->

    <!--[if gte mso 9]>
                                                                        </v:textbox>
                                                                    </v:rect>
                                                                    
 <![endif]-->45
      </td>
    </tr>
</table>

Upvotes: 1

Views: 6960

Answers (1)

Syfer
Syfer

Reputation: 4479

You can use the resource from campaign monitor which is Background.cm.

The page will allows you to generate code for a single table cell or the whole email in outlook.

Code snippet from their page:

<div style="background-color:#7bceeb;">
  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="https://i.imgur.com/YJOX1PC.png" color="#7bceeb"/>
  </v:background>
  <![endif]-->
  <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td valign="top" align="left" background="https://i.imgur.com/YJOX1PC.png">
      
      
     </td>
    </tr>
  </table>
</div>

Let me know if that helps.

UPDATE: Have you tried adding a table with html continent between the vml codes? Give a shot at the code below and see how it goes.

<table class="win-num" width="100%" style="border-spacing:0;font-family:sans-serif;color:#333333;height:65px;" > <tr> <td align='center' valign='middle' style="margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;font-family:Trebuchet,Tahoma,Verdana,Arial,Helvetica,Lucida,sans-serif;color:#666666;font-size:17px;font-weight:bold;background-color:transparent;background-image:url('https://gallery.mailchimp.com/f04c0adc8ac8b923261014c4b/images/191f8d2f-544d-43c6-bff3-bc1e643e242f.png');background-repeat:no-repeat;background-position:center center;background-attachment:scroll;"> <!--[if gte mso 9]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:55px;height:55px;"> <v:fill type="tile" https://gallery.mailchimp.com/f04c0adc8ac8b923261014c4b/images/191f8d2f-544d-43c6-bff3-bc1e643e242f.png" color="#1a4298" /> <v:textbox inset="0,0,0,0"> <![endif]-->
[Add a table at this spot and give it padding, height and width]
<!--[if gte mso 9]> </v:textbox> </v:rect> <![endif]-->45 </td> </tr> </table>

Upvotes: 1

Related Questions