如何在 HTML 电子邮件中创建重复的标题图像？答案

【问题标题】：How to create a repeating header image in HTML email?如何在 HTML 电子邮件中创建重复的标题图像？
【发布时间】：2016-12-06 11:23:29
【问题描述】：

我有一张图片，我想在 HTML 电子邮件中用作水平重复横幅，其下方为非白色背景色，该图片还可以缩放以适应高度。虽然它目前正在重复，但我无法正确缩小图像。 header 元素设置为 100px，但图片没有调整大小，被下一个元素截断。

HTML

<body style="margin: 0; padding: 0;" >

  <!-- CONTAINER TABLE (HEADER) -->
  <table border="0" cellpadding="0" cellspacing="0" width="100%" style=" table-layout: fixed;">
    <tr>
      <td align="center" bgcolor="#339969" style="padding: 0 0 0 0;">

        <!-- HIDDEN PREHEADER -->
        <div style="display: none; font-size: 1px; color:#333333; line-height: 1px; font-family: Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all;">
          Some text.
        </div>
        <!-- WRAPPER TABLE -->
        <table border="0" cellpadding="0" cellspacing="0" width="100%" class="wrapper">
          <!-- HEADER -->
          <tr>
            <td>
              <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>

                <!-- HERE need to properly scale then repeat this image -->
                  <td align="left"  
                      background="img/large_christmasbanner.png" 
                      background-size="contain" 
                      alt="Bappy Bolidays!" 
                      width="100%" 
                      height="100">
                  </td>

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

【问题讨论】：

标签： html html-table html-email

【解决方案1】：

background-size="contain" 不是有效的 html 属性。改用这个：

style="background-size: contain;"

【讨论】：

完美！感谢您的帮助。