Фоновое изображение Outlook 2013 сломано

У меня проблема с фоновым изображением в Outlook 2007/2010/2013.

Код:

<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>

Проблема только в Outlook 2007/2010/2013. В Outlook 2002/2003/2011 работает.

Outlook 2011: https://litmus.com/pub/2e23724/results#ol2011-full_on - работает фоновое изображение

Outlook 2013: https://litmus.com/pub/2e23724/results#ol2013-full_on - фоновое изображение сломано

Спасибо за помощь.


html css outlook vml
person Kasta    schedule 24.03.2014    source источник
comment
Я не очень хорошо знаком с особенностями электронной почты Outlook, но не могли бы вы вместо этого добавить атрибут стиля? style=background-image:url(test.endlesspeak.cz/img/bg-deepak. jpg);   -  person dzny    schedule 24.03.2014
comment
тоже не работает :-/   -  person Kasta    schedule 24.03.2014
comment
ссылки на эту связанную проблему переполнения стека могут помочь вам. удачи. взрывы электронной почты - это боль. stackoverflow.com/questions/3587328 /   -  person dzny    schedule 24.03.2014
comment
рекомендуется не использовать изображение в качестве фона. большая часть старой версии Outlook по-прежнему не поддерживает фоновое изображение. лучше используйте тег <img>.   -  person Kheema Pandey    schedule 24.03.2014
comment
stackoverflow.com/ вопросы/23280715/   -  person davidcondrey    schedule 07.05.2014

Ответы (2)


arrow_upward
0
arrow_downward

Используйте составное электронное письмо с изображением в кодировке base64, например:

На следующем рисунке показано сообщение, отправленное в формате MHTML. Он кодирует объекты HTML как изображения в формате MHTML и извлекает изображение SKY.jpg из местоположения на странице ASP. Он кодирует изображение в BASE-64 и присваивает изображению CID, с которым внутренне связывается атрибут изображения SRC.

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

<td Background="cid:[email protected]">

--==boundary-1
Content-Type: image/gif
Content-ID: <[email protected]>
Content-Transfer-Encoding: base64
Content-Disposition: inline; filename="SKY.gif"

Что будет означать что-то вроде этого в рассматриваемом коде:

--==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"

Ссылки

person Community    schedule 10.04.2014

arrow_upward
0
arrow_downward

2007/2010/2013 использует другую и более старую версию версии для рендеринга электронной почты, поэтому вероятность возникновения некоторых ошибок выше. Вот версия, которая работает для меня:

<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>

Следите за тем, чтобы высота всех элементов соответствовала высоте изображения, иначе ничего не получится.

person most_wanted    schedule 26.05.2015