Как сделать фоновое изображение в информационном бюллетене в Outlook?

Я пытаюсь сделать информационный бюллетень, где у меня есть изображение в качестве фона и текста. Это легко, но мне нужно это, чтобы работать на Ms Outlook.

Что я пробовал:

<td width="100" height="100" style="background: url('someurl');">text</td>

<td width="100" height="100" background="someurl">text</td>

<td width="100" height="100">
    <div style="width: 0px; height:0px; position: relative;">
        <div style="width: 100px; height: 100px; position: absolute; background: url('someurl')">
           text
        </div>
    </div>
</td>

Но ничего хорошего в перспективах не работает. Я понятия не имею, как это исправить. Я использую Outlook 2007.

Любая помощь будет оценена.

Ответ 1

Мощный инструмент для "Bulletproof Email Background Images" (VML для Outlook 2007/2010/2013 и HTML/CSS для Outlook 2000/2003, Gmail, Hotmail...)

http://emailbg.net

в качестве примера:

    <div style="background-color:#f6f6f6;">
  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="http://i.imgur.com/n8Q6f.png" color="#f6f6f6"/>
  </v:background>
  <![endif]-->
  <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td valign="top" align="left" background="http://i.imgur.com/n8Q6f.png">

      </td>
    </tr>
  </table>
</div>

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

Эта ссылка помогает использовать язык разметки векторов (VML)

msdn.microsoft.com/en-us/library/bb264137%28v=vs .85%29.aspx

www.w3.org/TR/NOTE-VML#_Toc416858389

Ответ 2

вы не можете добавить фоновое изображение в информационный бюллетень html, который должен быть просмотрен в Outlook. Это просто не работает, поскольку они игнорируют свойство.

У вас могут быть только цвета блоков (background-color) за текстом.

Outlook не поддерживает следующий CSS:

azimuth
background-attachment
background-image
background-position
background-repeat
border-spacing
bottom
caption-side
clear
clip
content
counter-increment
counter-reset
cue-before, cue-after, cue
cursor
display
elevation
empty-cells
float
font-size-adjust
font-stretch
left
line-break
list-style-image
list-style-position
marker-offset
max-height
max-width
min-height
min-width
orphans
outline
outline-color
outline-style
outline-width
overflow
overflow-x
overflow-y
pause-before, pause-after, pause
pitch
pitch-range
play-during
position
quotes
richness
right
speak
speak-header
speak-numeral
speak-punctuation
speech-rate
stress
table-layout
text-shadow
text-transform
top
unicode-bidi
visibility
voice-family
volume
widows
word-spacing
z-index

Источник: http://msdn.microsoft.com/en-us/library/aa338201.aspx

ОБНОВЛЕНИЕ - июль 2015

Я подумал, что лучше всего обновить этот список, так как он получает нечетное upvote время от времени - отличная ссылка на текущую поддержку почтового клиента доступна здесь: https://www.campaignmonitor.com/css/

Ответ 3

Справочная информация Работает в Outlook, но только в теге <body> письма. Он не будет работать в индивидуальном <td>, только в целом письме.

UPDATE: вы можете использовать метод VML, который позволяет вам для добавления фоновых изображений к отдельным элементам страницы в Outlook.

Это работает для большинства клиентов, включая Outlook:

<body style="background-image: url('img.jpg');">
<table width="100%" background="img.jpg">

Вот полный код, который работает во всех основных почтовых клиентах, включая Outlook. Он имеет фоновое изображение, установленное с резервным фоном в таблице ширины 100%.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
  <body style="margin: 0px; padding: 0px; background-image: url('http://lorempixel.com/output/food-q-c-100-100-7.jpg'); background-color: #0D679C; background-position: top center;" bgcolor="#0D679C">
  <!-- BODY FAKE PANEL -->
    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" background="http://lorempixel.com/output/food-q-c-100-100-7.jpg">
      <tr>
        <td>
        <!-- CENTER FLOAT -->
          <table width="800" border="0" valign="top" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
            <tr>
              <td height="1000" align="center" valign="middle">
                Center panel
              </td>
            </tr>
          </table>
        <!-- /CENTER FLOAT -->
        </td>
      </tr>
    </table>
  <!-- /BODY FAKE PANEL -->
  </body>
</html>

Ответ 4

Единственный способ, которым я смог это сделать, - это использовать этот код (таблицы TD). Я тестировал в Outlook 2010. Я также тестировал через клиента электронной почты, и он работал для обоих.

Единственное, что вам нужно сделать, это изменить your_image.jpg(есть два примера этого для одного и того же изображения, убедитесь, что вы обновили оба кода) и #your_color.

<td bgcolor="#your_color" background="your_image.jpg">

<!--[if gte mso 9]>

<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:300px; width:600px; top:0; left:0; border:0; z-index:1;' src="your_image.jpg"/>

<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:300px; width:600px; top:-5; left:-10; border:0; z-index:2;'>

<![endif]-->

<p>Text over background image.</p>

<!--[if gte mso 9]>

</v:shape>

<![endif]-->

</td>

источник

Ответ 5

Не все HTML и CSS поддерживаются продуктами Microsoft Office, в частности Outlook; возьмите смотрите здесь ссылку на поддерживаемые элементы, которые вы можете и не можете использовать в Outlook при рендеринге HTML.

В частности, из этой ссылки не указано, что свойство background CSS поддерживается для элементов div. Возможно, вам придется использовать img и сделать некоторые хакерские слои.

Обратите внимание, что во втором примере у вас есть несоответствие цитаты, которое ничем не поможет.

Наконец, и что-то, что я просто натолкнулся на ссылку, есть HTML и CSS Validator тоже l - вы можете попробовать запустить это против своего рассылку новостей и посмотреть, дает ли она вам какие-либо предложения/альтернативы.

Ответ 6

У меня была именно эта проблема пару месяцев назад, когда я работал над редактором электронной почты WYSIWYG для своей компании. Outlook поддерживает только фоновые изображения, если они применяются к тегу <body> - любой другой элемент, и он не работает.

В конце концов, единственным обходным решением, которое я нашел, было использование элемента <div> для ввода текста, а затем во время процесса подачи контента я произвел запрос AJAX с содержимым <div> на PHP скрипт, который написал текст на пустую версию нашего изображения заголовка, сохранил файл и вернул его (уникально сгенерированное) имя. Затем я использовал Javascript для удаления <div> и добавил тег <img>, используя возвращаемое имя файла в атрибуте src.

Вы можете получить всю информацию/методологию со страницы imagecreatefrompng() на сайте Документов Google.

Ответ 7

Фоновое изображение не поддерживается в Outlook. Вы должны использовать изображение и позиционировать его за текстом, используя относительную или абсолютную позицию.

Ответ 8

Здесь что-то объяснено:

https://web.archive.org/web/20140608170948/http://www.campaignmonitor.com:80/blog/post/3363/updated-applying-a-background-image-to-html-email

Ответ 9

Вы можете использовать его только в теге тела или в таблицах. Что-то вроде этого:

<table width="100%" background="YOUR_IMAGE_URL" style="STYLES YOU WANT (i.e. background-repeat)">

Это сработало для меня.