Outlook 2013 background image broken

问题

I have problem with background image in Outlook 2007/2010/2013.

Code:

<table cellpadding="0" cellspacing="0" border="0" width="580" style="font-family: Arial;">
        <tr>
        <td background="http://test.endlesspeak.cz/img/bg-deepak.jpg" bgcolor="#a7a8ab" width="580" height="242" style="text-align: left; vertical-align: middle; color: #203244; font-size: 12pt; padding: 0; margin: 0;">
          <!--[if gte mso 9]>
          <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:580px;height:242px;margin: 0; padding: 0;">
            <v:fill type="tile" src="http://test.endlesspeak.cz/img/bg-deepak.jpg" color="#a7a8ab" />
            <v:textbox inset="0,0,0,0">
          <![endif]-->  
          <div valign="middle">

            <p valign="middle" style="padding: 0; margin: 50px 260px 0 55px; vertical-align: middle; font-family: Arial; color: #203244; font-size: 12pt;">Poprvé navštíví ČR <b style="color: #2a80b9; text-decoration: underline;">Deepak Chopra</b>, světová autorita v oblasti spirituality a osobního rozvoje, populární americký spíkr a spisovatel. Jako proslulý lékař formuloval vlastní teze léčení, ve kterých propojuje tradiční východní léčitelské umění s tím nejlepším, co nabízí západní medicína.</p>

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

</table>

Problem is just in Outlook 2007/2010/2013. In Outlook 2002/2003/2011 it works.

Outlook 2011: https://litmus.com/pub/2e23724/results#ol2011-full_on - background image works

Outlook 2013: https://litmus.com/pub/2e23724/results#ol2013-full_on - background image broken

Thank you for help.

回答1:

2007/2010/2013 uses another and older version of the email rendering version, so it's more likely to get some errors. Here is a version that works for me (taken from responsive.email):

<td background="yourimage.png" bgcolor="#FFFFFF" class="a8 a9 a10" style="height:50px;background-image:url('yourimage.png')" valign="top">
<!--[if gte mso 9]><v:rect fill="true" stroke="false" style="width:700px;height:50px;"><v:fill color="#FFFFFF" src="yourimage.png" type="tile" /><v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"><![endif]-->
<table border="0" cellpadding="0" cellspacing="0" style="width:100%">
<tr class="a8" style="height:50px">
<td valign="top">some content
</td>
</tr>
</table>
<p style="margin:0;mso-hide:all">
<o:p> 
</o:p>
</p>
<!--[if gte mso 9]></v:textbox></v:rect><![endif]-->
</td>

Take care that the heights of all elements are corresponding to the image height - otherwise it will not work.

回答2:

Use a Multipart email with a base64 encoded image, such as the following:

The following figure shows a message that was sent using the message format MHTML. It encodes the HTML objects as images in MHTML format, and retrieves the SKY.jpg image from the location in the ASP page. It encodes the image in BASE-64, and gives the image a CID, to which it internally links the image SRC attribute.

--==boundary-1
Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: 7bit
Content-Base: http://www.sky.com

<td Background="cid:part1.mimetest-15@dsv.su.se">

--==boundary-1
Content-Type: image/gif
Content-ID: <part1.mimetest-15@dsv.su.se>
Content-Transfer-Encoding: base64
Content-Disposition: inline; filename="SKY.gif"

Which would translate to something like this in the code in question:

--==boundary-1
Content-Type: text/html; charset=utf-8
Content-Transfer-Encoding: 7bit
Content-Base: http://test.endlesspeak.cz

<td background="cid:bg-deepak.jpg">
--==boundary-1
Content-type: image/jpg; name="bg-deepak.jpg"
Content-ID: <bg-deepak.jpg>
Content-Transfer-Encoding: base64
Content-Disposition: inline; filename="bg-deepak.gif"

References

• Messaging Formats

• Binary2Base64

• MHTML Test Messages

• MIME Headers

• POP Email Client with full MIME Support

• RFC 5034 - The Post Office Protocol (POP3) Simple Authentication and Security Layer (SASL) Authentication Mechanism

• How to create an email with embedded images that is compatible with the most mail clients

来源：https://stackoverflow.com/questions/22613230/outlook-2013-background-image-broken