CSS background-image "изображение" не отображается в Outlook

Question

У меня создано письмо на основе HTML, и для одного из элементов определено свойство "background-image".Когда электронное письмо отправлено и получено в Outlook, фоновое изображение не отображается.Когда оно получено в Gmail, оно появляется.Я думаю, что это может быть связано с определенным ограничением Outlook?Вот код HTML:

<div style="text-align: center; background-image:url('http://image.info.geha.com/lib/fe44157075640479741475/m/1/34273cbe-2375-4a73-aec2-5151bf51cf91.jpg'); border-color:#e3e4e5">
 <p style=" align: center; bottom: 50px; left: 100
px;">
  <br>
  <span style="color:#500778;"><span style="font-size:20px;">GEHA EXCLUSIVES</span><br>
  <span style="font-size:18px;">______</span></span><br>
  <br>
  <br>
  <span style="color:#ee7623;"><u><span style="font-size:18px;"><a href="#">Link to website content goes here</a></span></u></span><br>
  <br>
  <span style="color:#ee7623;"><u><span style="font-size: 18px; text-align: center;"><a href="#">Link to website content goes here</a></span></u></span><br>
  <br>
  <span style="display: none;">&nbsp;</span><span style="color:#ee7623;"><u><span style="font-size: 18px; text-align: center;"><a href="#">Link to website content goes here</a></span></u></span><br>
  <br>
  <br>
  <br>
  <span style="display: none;">&nbsp;</span></p></div>

Вот рендеринг Outlook:

А вот рендеринг Gmail:

Есть идеи, почему это так?

Answer 1

Вот что я сделал, чтобы решить проблему

<!--[if mso]>
    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="width:600;height:257;" arcsize="10%"  fillcolor="#e3e4e5" strokecolor="#ffffff">
<div style="text-align:center;">
 <p align="center" style="bottom:50px; left:100px;">
<br>
  <span style="color:#500778;"><span style="font-size:20px;">GEHA EXCLUSIVES</span><br>
  <span style="font-size:18px;">______</span></span><br>
  <br>
  <br>
  <span style="color:#ee7623;"><u><span style="font-size:18px;">Link to website content goes here</span></u></span><br>
  <br>
  <span style="color:#ee7623;"><u><span style="font-size: 18px; text-align: center;">Link to website content goes here</span></u></span><br>
  <br>
  <span style="display: none;">&nbsp;</span><span style="color:#ee7623;"><u><span style="font-size: 18px; text-align: center;">Link to website content goes here</span></u></span><br>
  <br>
  <br>
  <br>
  <span style="display: none;">&nbsp;</span></p></div>

    </v:roundrect>
    <![endif]--><!--[if !mso]><!--><div style="text-align: center;">
 <p style="border-radius:25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; border-style:solid; align: center; bottom: 50px; left: 100
px; background:#e3e4e5; border-color:#e3e4e5">
  <br>
  <span style="color:#500778;"><span style="font-size:20px;">GEHA EXCLUSIVES</span><br>
  <span style="font-size:18px;">______</span></span><br>
  <br>
  <br>
  <span style="color:#ee7623;"><u><span style="font-size:18px;">Link to website content goes here</span></u></span><br>
  <br>
  <span style="color:#ee7623;"><u><span style="font-size: 18px; text-align: center;">Link to website content goes here</span></u></span><br>
  <br>
  <span style="display: none;">&nbsp;</span><span style="color:#ee7623;"><u><span style="font-size: 18px; text-align: center;">Link to website content goes here</span></u></span><br>
  <br>
  <br>
  <br>
  <span style="display: none;">&nbsp;</span></p></div><!-- <![endif]-->

, которая вызвала следующее в Outlook (не говоря о фиолетовой полосе. Это просто часть скриншота, следующий элемент):

Answer 2

Outlook 2000-03 поддерживает фоновые изображения, потому что они используют Internet Explorer в качестве движка рендеринга. Однако в Outlook 2007-16 они переключились на Microsoft Word, что делает их абсолютной болью в шее.

Outlook 07-16 не будет поддерживать фоновые изображения, если вы не используете VML. В Campaign Monitor есть неплохой инструмент для создания этого кода: https://backgrounds.cm/

Другой вариант - использовать атрибут bgcolor в вашем div. Outlook 07-16 - единственный почтовый браузер, который все еще поддерживает это. Все остальные браузеры будут использовать ваше фоновое изображение. У вас не будет закругленных углов, но ваш серый фон будет там.

Для любых других вопросов о том, какие браузеры поддерживают что, используйте этот список: https://www.campaignmonitor.com/css/color-background/background-image/