фоновое изображение на TD в Outlook 2007

Question

Мне сказали, что использование таблиц - лучший способ отправлять электронные письма, хотя это было вдвое сложнее.Я настроил электронную почту в таблицах, установил все ячейки, для которых нужен фон, с помощью свойства background="", а также использовал CSS в тегах <style>, говорящих то же самое о моих базах.Фон тела хорошо выглядит в перспективе, а фон TD - нет.Я также пытался использовать, но это тоже не работает.Я читал, что Outlook 2007 не поддерживает фоновые изображения и не будет в будущем, я думаю, что должен быть способ обойти это?

Answer 1

Это должно помочь :

Возможно, вы читали ранее о нашем подходе к применению фонового изображения к электронному письму . Это включало не только добавление фонового изображения ко всей HTML-странице, но и завершение всего содержимого таблицы с применением фонового изображения. Однако у этого метода было ограничение: в то время как вы могли применить фоновое изображение ко всей таблице, вы не можете применить его к отдельной ячейке таблицы. Благодаря одному из наших звездных клиентов, Брайану Тису , нам показали небольшой код, который не только позволит вам добавить фоновое изображение в ячейку таблицы , но и работает в большинство крупных почтовых клиентов тоже ...

Этот метод ... заставляет фоновое изображение отображаться в Outlook 2003/2007/2010 ...

Answer 2

Проверьте эту ссылку для поддерживаемых тегов HTML и CSS в Outlook 2007:

http://msdn.microsoft.com/en-us/library/aa338201%28v=office.12%29.aspx

MS также предлагает инструмент проверки HTML / CSS для Outlook 2007 по указанному выше URL-адресу. Это может, по крайней мере, дать вам метод тестирования.

Я обнаружил, что «Меньше значит больше», когда речь заходит об электронном письме в формате HTML - простой макет, простые методы. Поскольку каждый почтовый клиент будет отличаться, «замять» его - единственный способ гарантировать самый широкий охват.

Answer 3

Вы можете сделать это, inside <td> where you want bg image place another table и сделать это.

<td> < !-- this is table where you want to set bg image -->
< table background="myimg.jpg"    style="background-repeat:no-repeat;" >
 here goes content
 </table>
 </td>

это будет охватывать целое, и оно отлично работает в outlook

Answer 4

К счастью, для решения этой проблемы вы можете воспользоваться настройками форматирования. Положительным моментом является то, что совместимость Outlook с электронной почтой в формате HTML 2007 может снизить вероятность ее попадания в папку нежелательной почты получателя. Недостатком является то, что вам, возможно, придется изменить способ, которым вы подходите к форматированию частей ваших электронных писем, что влияет на внешний вид ваших объявлений. Ниже приведен список ключевых элементов для поиска и возможные альтернативы, совместимые с Outlook 2007.

• Фоновые изображения - Фоновые изображения не будут отображаться в Outlook 2007. Это может оставить большую, непреднамеренную пустоту в вашей электронной почте. Вы должны избегать использования фоновых изображений в целом. По возможности, вы должны использовать встроенные теги изображений вместо этого. Если вы чувствуете, что должны использовать фоновое изображение, установите соответствующий цвет фона для заполнения для потенциально отсутствующего изображения. Если у вас есть текст, наложенный на фоновое изображение, вы можете отредактировать изображение, включив в него текст, и использовать карту изображений для любых ссылок.

• Теги деления - теги «Div» не полностью поддерживаются в Outlook 2007. Некоторые из наиболее часто используемых атрибутов, которые были опущены: float, clear, position и padding. Без этих атрибутов позиционирование с тегами div практически невозможно. Вместо этого вы должны контролировать размещение вашей электронной почты с помощью стандартной таблицы.

• Формы - формы не поддерживаются в Outlook 2007. Получатели Outlook 2007 не смогут отправлять любые формы, встроенные в электронную почту. Если вы хотите, чтобы получатели могли заполнить форму, поместите ссылку на ее онлайн-версию в электронном письме.

• Flash & JavaScript. Рекомендуется не пытаться использовать Flash или Javascript в электронных письмах HTML из-за отсутствия поддержки в почтовых браузерах (включая Outlook 2007) и из-за того, что некоторые фильтры будут помечаться тегами. электронные письма, которые содержат код Flash или JavaScript. Кроме того, большинство читателей электронной почты автоматически отключают этот контент в качестве меры безопасности.

• Маркированный список с изображениями - Хотя упорядоченные и неупорядоченные списки полностью поддерживаются, списки, использующие изображения в качестве маркеров вместо стандартных маркеров, не поддерживаются. Если вам нужно использовать изображение для точек маркера, одно из возможных решений - поместить ваш список в таблицу из двух столбцов, используя левый столбец для размещения маркеров.

• Анимированные GIF-изображения. Анимированные GIF-изображения не будут анимироваться в Outlook 2007. Изображение будет отображаться, но будет отображаться только первый кадр анимации.

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

• Определения таблиц. Как мы подробно описали выше, Outlook 2007 отображает электронные письма в формате HTML в Microsoft® Word, которые очень чувствительны к дополнительным тегам <tr> или <td> и плохо адаптируются к таблицам плохого размера. Предыдущие версии Outlook открывали электронные письма в Internet Explorer, который очень прост в плохих определениях таблиц. Вы должны убедиться, что определения вашей таблицы правильные, и что данные, которые вы помещаете в таблицу, вписываются в определенную ширину таблицы.

Answer 5

Я сделал много писем в формате HTML и обнаружил, что фоновые изображения НЕ подходят для использования без какого-либо взлома.

Всегда используйте тег <img> в ТД для ваших изображений.Если вам нужен текст поверх изображения, включите его в изображение и повторите текст в атрибуте alt тега img.

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

К сожалению, в электронных письмах в формате HTML мы немного ограничены тем, что мы можем сделать, но есть способы обойти это:)

Надеюсь, это поможет

Answer 6

Фоновые изображения ячеек таблицы полной ширины

<html xmlns:v="urn:schemas-microsoft-com:vml">
    <head>
    <style>
    v:* { behavior: url(#default#VML); display: inline-block; }
    </style>
    </head>
    <body>
        <center>
        <table width="100%" height="20">
            <tr>
                <td bgcolor="#dddddd" style="background-image:url('http://placekitten.com/g/500/300');background-repeat:no-repeat;background-position:center;" background="http://placekitten.com/g/500/300" width="100%" height="300">
                <!--[if gte mso 9]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:300px;">
                        <v:fill type="frame" src="http://placekitten.com/g/500/300" color="#ffffff" />
                    </v:rect>
                <![endif]-->
                </td>
            </tr>
            <tr>
                <td bgcolor="#33cc99">
                    <table border="0" cellpadding="5" cellspacing="0"><tr><td height="5"><table border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr></table></td></tr></table>
                </td>
            </tr>
            <tr>
                <td bgcolor="#ffff99" style="background-image:url('http://placekitten.com/g/500/300');background-repeat:no-repeat;background-position:center;" background="http://placekitten.com/g/500/300" width="100%" height="300">
                    <!--[if gte mso 9]>
                        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:300px;">
                            <v:fill type="frame" src="http://placekitten.com/g/500/300" color="#ffffff" />
                        </v:rect>
                    <![endif]-->
                </td>
            </tr>
        </table>
        </center>
    </body>
</html>

• Протестировано в Outlook 2010 через Windows 7 VMWare на OSX 10.9.2

---

Фоновые изображения ячеек таблицы полной ширины

    <html xmlns:v="urn:schemas-microsoft-com:vml">
        <head>
            <style>
                v:* { behavior: url(#default#VML); display: inline-block; }
            </style>
        </head>

        <body>

        <center>
        <table width="100%">
            <tr>
                <td bgcolor="#dddddd" style="background-image:url('http://placekitten.com/g/500/300');background-repeat:no-repeat;background-position:center;" background="http://placekitten.com/g/500/300" width="100%" height="300">
                    <!--[if gte mso 9]>
                        <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:300px;">
                            <v:fill type="tile" src="http://placekitten.com/g/500/300" color="#ffffff" />
                        </v:rect>
                    <![endif]-->
                </td>
            </tr>
        </table>
        </center>

        </body>
    </html>

• Протестировано в Outlook 2010 через Windows 7 VMWare в OSX 10.9.2

---

Заданные фоновые изображения ячейки таблицы ширины

Вот пример, две строки, первая строка имеет 3 столбца с 3 отдельными фоновыми изображениями, вторая строка охватывает все как однофоновое изображение.

    <table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
        <tr>
            <td style="width: 300px; height: 80px; background-image: url('http://placekitten.com/g/300/80');">
            <!--[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; width: 300px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/300/80" />
                <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 300px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
                <div>
            <![endif]-->
                <table width="300" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
                    <tr>
                        <td height="80" align="center" valign="top" style="color:#ffffff;font-size:20px;">
                            <span>Text</span>
                        </td>
                    </tr>
                </table>
            <!--[if gte mso 9]>
                </div>
                </v:shape>
            <![endif]-->
            </td>
            <td style="width: 100px; height: 80px; background-image: url('http://placekitten.com/g/100/80');">
            <!--[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; width: 100px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/100/80" />
                <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 100px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
                <div>
            <![endif]-->
                <table width="80" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
                    <tr>
                        <td height="80" align="center" valign="top">
                            <span>Text</span>
                        </td>
                    </tr>
                </table>
            <!--[if gte mso 9]>
                </div>
                </v:shape>
            <![endif]-->
            </td>
            <td style="width: 200px; height: 80px; background-image: url('http://placekitten.com/g/200/100');">
            <!--[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; width: 200px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/200/100" />
                <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 200px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
                <div>
            <![endif]-->
                <table width="200" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
                    <tr>
                        <td height="80" align="center" valign="top" style="color:#ffffff;font-size:20px;">
                            <span>Text</span>
                        </td>
                    </tr>
                </table>
            <!--[if gte mso 9]>
                </div>
                </v:shape>
            <![endif]-->
            </td>
        </tr>
    </table>
    <table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
        <tr>
            <td style="width: 600px; height: 150px; background-image: url('http://placekitten.com/g/600/150');">
            <!--[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; width: 600px; height: 150px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/600/150" />
                <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 600px; height: 150px; top: -5; left: -10; border: 0; z-index: 2;'>
                <div>
            <![endif]-->
                <table width="600" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
                    <tr>
                        <td height="150" align="center" valign="top" style="color:#ffffff;font-size:20px;">
                            <span>Text</span>
                        </td>
                    </tr>
                </table>
            <!--[if gte mso 9]>
                </div>
                </v:shape>
            <![endif]-->
            </td>
        </tr>
    </table>

• Протестировано в Outlook 2010 через Windows 7 VMWare на OSX 10.9.2

Answer 7

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

<td background="http://www.thiespublishing.com/oneimage.gif" height="402" width="600" bgcolor="#cccccc">
<!--[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:402px; width:600px;top:0;left:0;border:0;z-index:1;' src="http://www.thiespublishing.com/oneimage.gif"/>
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:407px; width:610px;top:-5;left:-10;border:0;z-index:2;'>
<div>
<![endif]-->
<!-- This is where you nest a table with the content that will float over the image -->
<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="600" height="402" valign="top">
Insert content here, including additional nested tables.
</td>
</tr>
</table>
<!-- This ends the nested table content -->
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>

Источник: https://www.campaignmonitor.com/forums/topic/3862/please-test-this-outlook-20072010-background-image-solution/