如何在 HTML 电子邮件中创建重复的 header 图片？

Question

我有一张图片，我想在 HTML 电子邮件中用作 horizontally-repeating 横幅，底下有 non-white 背景色，它也可以缩放以适应高度.虽然目前正在重复，但我无法正确缩小图像。 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>

Answer 1

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

style="background-size: contain;"

如何在 HTML 电子邮件中创建重复的 header 图片？

How to create a repeating header image in HTML email?

html

html-table

html-email