Фоновые изображения, не работающие в Outlook 2007 и более поздних версиях

Ответ 1

Поддержка электронной почты для фоновых изображений

Outlook 2007 и более поздние версии поддерживают только два способа отображения изображения bg:

• Использование атрибута фона HTML в теге body
• Использование встроенного стиля фонового изображения в теге body

В обоих случаях Outlook масштабирует изображение по-другому, чем другие читатели электронной почты, и нет способа предотвратить разбиение изображения bg.

Таким образом, для всех практических целей фоновые изображения не являются вариантом для поддержки широкого круга читателей электронной почты. Вместо этого вам нужно будет делать снимки переднего плана (теги img).

Элементы наложения не являются опцией

Outlook 2007+, Gmail, Hotmail и Yahoo Mail не поддерживают позиционирование CSS. В результате нет способа разместить текстовый элемент поверх изображения переднего плана.

При нарезке электронной почты в разные области (обычно с использованием таблиц HTML) каждая область может быть либо текстовым, либо передним. Но вы не можете иметь оба в одной области (т.е. Вы не можете иметь два элемента, занимающих одно и то же пространство или перекрывающиеся).

Решение

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

Для областей, где есть изображение с текстом поверх него, есть 3 варианта:

• Вырезать текст как часть изображения. Это ущемляет удобство использования электронной почты, и это особенно проблематично для пользователей, у которых по умолчанию отключены изображения (так как они не будут изначально видеть текст).
• Отображение изображения в качестве фонового изображения с учетом того, что пользователи Outlook 2007+ не будут видеть изображение (изящное ухудшение).
• Не пытайтесь отображать фоновое изображение в любом устройстве чтения электронной почты.

В модерации вариант № 1 обычно безопасен и разумен. Но при интенсивном использовании это приводит к очень большому соотношению изображений к тексту в письме, что может вызвать некоторые спам-фильтры. Прежде чем приступить к использованию варианта №1, проверьте электронную почту в различных спам-фильтрах.

Прежде чем приступать к вариантам № 2 или № 3, вам может потребоваться очистить его от дизайнеров (как один из них компрометирует дизайн в Outlook 2007+). В увеличенной картине фоновые изображения следует использовать экономно при разработке электронных писем. Может быть полезно указать разработчикам влияние использования фоновых изображений.

Ответ 2

Outlook поддерживает только фоновые изображения в теге тела, если вы не используете VML. Проверьте это для VML: http://backgrounds.cm/

Вот пример, который он работает в теге body.

Ответ 3

Я думаю, вы найдете это действительно удобным: http://www.campaignmonitor.com/css/

Outlook 2007-13 не поддерживает свойство background-image, поэтому для этого не существует хорошего способа.

Основываясь на личном опыте: чтобы получить наиболее последовательный опыт работы с почтовыми клиентами, я бы перепроектировал письмо, чтобы не требовалось фоновое изображение.

Ответ 4

background-image не поддерживается в Outlook или Gmail на Android 2.3. См.: http://www.campaignmonitor.com/css/

Я обычно использую background-color в качестве резервной копии, или если фоновое изображение необходимо, сделайте текстовую часть изображения.

Ответ 5

Фоновое изображение не будет поддерживаться в Outlook 2007+ Использование VML (Vector Markup Language (VML) - это формат XML-формата для двумерной векторной графики.), Чтобы получить поддержку например:

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

Ссылка справки: http://backgrounds.cm/

Контекст Outlook       /* Ваш CSS, ориентированный на Outlook, идет здесь. */

'mso 9 - это Office 2000 Outlook 2000 - версия 9 Outlook 2002 - версия 10 Outlook 2003 - версия 11 Outlook 2007 - версия 12 Outlook 2010 - версия 14 Outlook 2013 - версия 15 http://templates.mailchimp.com/development/css/outlook-conditional-css/

Ответ 6

Вы можете сделать это, используя правильный VML. Следующий код работает лучше всего для меня:

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

Ответ 7

Я только что столкнулся с этой проблемой при создании шаблонов массовых почтовых отправлений в MailChimp.

В то время как клиентское программное обеспечение Outlook позволяет использовать только теги тегов тегов, они удаляются сайтами электронной почты, такими как электронная почта Outlook (hotmail), gmail и т.д.

То же самое верно и в обратном... Клиент Outlook выделяет фоновые изображения таблицы, тогда как клиенты веб-почты позволяют использовать фоновые таблицы.

Решение: используйте оба параметра:

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

В самом Mailchimp это, по-видимому, отображается ошибочно - вы можете увидеть край фона тела по краям фона таблицы, но к тому времени, когда он достигнет получателя, либо один, либо другой удаляется в зависимости от того, будет ли они используют клиентское программное обеспечение Outlook или электронную почту Hotmail/Gmail.

Я еще должен попробовать это в других почтовых клиентских программах или веб-почте, поэтому я не знаю, есть ли другие, которые отображали бы оба. Если кто-то пробовал этот метод с другим почтовым клиентом или электронной почтой, кроме Hotmail или Gmail, я бы очень хотел узнать, универсально ли это исправление.