Фоновое изображение не покрывает тд в Outlook 2018 - PullRequest
0 голосов
/ 26 сентября 2018

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

Однако для последней версии Office 365 ( Версия 1808 - сборка 10730.20102 ) фоновое изображение не 'т покрыть всю ширину тд?

Предварительный просмотр :

enter image description here

Темно-синий цвет является запасным цветом, но для этого конкретногоВерсия Outlook, фоновое изображение не охватывает всего td.

Не знаете, почему это так?

Код :

<table>
  <tbody>
    <tr>
      <!-- Condition to allow background images to work in Outlook -->
      <td style=" background-repeat: no-repeat;background-size: cover; max-height: 384px; min-width:600px;" background="https://storage.pardot.com/213851/80721/email_insert_1.png" bgcolor="#1f3c5a" height="384px" width="600" valign="top">
        <!--[if gte mso 9]>
                  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; height: 384px;">
                  <v:fill type="tile" src="https://storage.pardot.com/213851/80721/email_insert_1.png" color="#1f3c5a" />
                  <v:textbox inset="0,0,0,0">
                  <![endif]-->
        <div style="min-height:300px;">
          <table border="0" cellpadding="0" cellspacing="0">
            <tbody>
              <!-- Creating padding above nested div -->
              <tr>
                <td height="30" style="height:30px;">
                  <!--PADDING-->
                </td>
              </tr>

            </tbody>
          </table>
        </div>
        <!--[if gte mso 9]>
                  </v:textbox>
                  </v:rect>
                  <![endif]-->
      </td>
    </tr>
  </tbody>
</table>

Ответы [ 2 ]

0 голосов
/ 28 сентября 2018

<table>
  <tbody>
    <tr>
      <!-- Condition to allow background images to work in Outlook -->
      <td style=" background-repeat: no-repeat;background-size: cover; max-height: 384px; min-width:600px;" background="https://storage.pardot.com/213851/80721/email_insert_1.png" bgcolor="#1f3c5a" height="384px" width="1000" valign="top">
        <!--[if gte mso 9]>
                  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; height: 384px;">
                  <v:fill type="tile" src="https://storage.pardot.com/213851/80721/email_insert_1.png" color="#1f3c5a" />
                  <v:textbox inset="0,0,0,0">
                  <![endif]-->
        <div style="min-height:300px;">
          <table border="0" cellpadding="0" cellspacing="0">
            <tbody>
              <!-- Creating padding above nested div -->
              <tr>
                <td height="30" style="height:30px;">
                  <!--PADDING-->
                </td>
              </tr>

            </tbody>
          </table>
        </div>
        <!--[if gte mso 9]>
                  </v:textbox>
                  </v:rect>
                  <![endif]-->
      </td>
    </tr>
  </tbody>
</table>
 Run code snipp
0 голосов
/ 26 сентября 2018

Пожалуйста, проверьте еще раз некоторые изменения.

<table bgcolor="#1f3c5a" style="vertical-align: top; background-position: top center; background-repeat: no-repeat;background-size: cover; -webkit-background-size: cover; max-height: 384px; width:600px;" background="https://storage.pardot.com/213851/80721/email_insert_1.png" border="0" cellpadding="0" cellspacing="0" width="600">
  <tbody>
    <tr>
      <!-- Condition to allow background images to work in Outlook -->
      <td  height="384px" width="600" valign="top">
        <!--[if gte mso 9]>
                  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; height: 384px;">
                  <v:fill type="tile" src="https://storage.pardot.com/213851/80721/email_insert_1.png" color="#1f3c5a" />
                  <v:textbox inset="0,0,0,0">
                  <![endif]-->
        <div style="min-height:300px;">
          <table border="0" cellpadding="0" cellspacing="0">
            <tbody>
              <!-- Creating padding above nested div -->
              <tr>
                <td height="30" style="height:30px;">
                  <!--PADDING-->
                </td>
              </tr>

            </tbody>
          </table>
        </div>
        <!--[if gte mso 9]>
                  </v:textbox>
                  </v:rect>
                  <![endif]-->
      </td>
    </tr>
  </tbody>
</table>
...