发表新帖
发表新帖

Background images not working in Outlook 2007 and later

前端 未结
关注
9 2029
猫巷女王i
猫巷女王i 2020-12-08 05:44

I made an HTML Email Template that is working fine in most email readers, but the background images are not showing in Outlook 2007, 2010, and 2013. How can I solve the prob

相关标签:
9条回答
  • 心在旅途
    2020-12-08 06:35

    You can do this using the correct VML. The below codepiece works best for me:

    <table>
<tr>
<td background="http://fpoimg.com/300x300?text=I%20am%20a%20background%20image" width="300" height="300">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" 
    style='width:300px;height:300px;position:absolute;bottom:0;left:0;border:0;z-index:-3;' 
    src="http://fpoimg.com/300x300?text=I%20am%20a%20background%20image" />
<![endif]-->
<p>Put the rest of your content here</p>
</td>
</tr>
</table>
    0 讨论(0)
  • 轻奢々
    2020-12-08 06:35

    I've just come across this problem while creating bulk emailer templates in MailChimp.

    While the Outlook client software allows only body tag backgrounds, these are stripped out by webmail sites like Outlook webmail (hotmail), gmail etc.

    The same is also true in reverse... Outlook client strips out table background images, whereas webmail clients allow table backgrounds.

    Solution: use both:

    <body background="image.jpg">
<table width="100%" background="image.jpg">

    In Mailchimp itself, this seems to display erroneously - you can see the edge of the body background around the edges of the table background, but by the time it reaches the recipient, either one or the other is stripped out depending on whether they're using Outlook client software or Hotmail/Gmail webmail.

    I'm yet to try this in other email client programs or webmail, so I don't know if there are others that would display both. If anyone has tried this method with other email client software or webmail other than Hotmail or Gmail, I'd very much like to know if this fix is universal.

    0 讨论(0)
  • 时光取名叫无心
    2020-12-08 06:37

    Background image will not support in outlook 2007+ Use VML ( Vector Markup Language (VML) is an XML-based file format for two-dimensional vector graphics. ) to get support eg : 

       <div>
     <!--[if gte mso 9]>
     <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
      <v:fill type="tile" src="pink_bkg.png.png" color="#fff"/>
     </v:background>
     <![endif]-->
     <table>
       <tr>
         <td>
         </td>
       </tr>
      </table>
   </div>

    Help Link : http://backgrounds.cm/

    Outlook Specific /* Your Outlook-specific CSS goes here. */

    ‘mso 9’ is Office 2000 Outlook 2000 - Version 9 Outlook 2002 - Version 10 Outlook 2003 - Version 11 Outlook 2007 - Version 12 Outlook 2010 - Version 14 Outlook 2013 - Version 15 http://templates.mailchimp.com/development/css/outlook-conditional-css/

    0 讨论(0)
 看不清?
提交回复
热议问题