Полные ширины фона в Outlook '07/'10/'13

Я использовал монитор кампании http://backgrounds.cm/ для одной фиксированной высоты/ширины <td>, которая отлично работает на всех настольных клиентах, но мы переходим на полные электронные письма, и я не могу получить полный вариант ширины для правильной отображения в любой версии mso outlook. А именно, это происходит:

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

Ответ 1

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

<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

Ответ 2

Попробуйте этот шаблон жидкости с фоном VML, встроенным в:

<!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>
  <style type="text/css">
    #outlook a {padding:0;}
    body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
    .ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
    a:active, a:visited, a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #005288 !important; pointer-events: auto; cursor: default;}
    table td {border-collapse: collapse;}
    @media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
  </style>
</head>
<body style="margin: 0px; padding: 0px; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#FFFFFF">

<div style="background-color:#7bceeb;">
  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="http://i.imgur.com/XCnBXwP.png" color="#7bceeb"/>
  </v:background>
  <![endif]-->

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" background="http://i.imgur.com/XCnBXwP.png">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td valign="top">
<![endif]-->
<table width="100%" class="maxW" style="max-width: 600px; margin: auto;" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" align="center">


<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="margin: auto;">
  <tr>
    <td bgcolor="#FFFFFF" align="left" valign="top" height="600" style="padding:30px;">
      Content
    </td>
  </tr>
</table>


</td></tr></table>
<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->
</td></tr></table>

</div>
</body></html>