Outlook 2007及以上版本邮件模板如何设置不重复背景图片

你之前写的VML代码缺了几个核心属性，才会导致背景图一直重复平铺，下面是全版本Outlook兼容的可用方案。

前置准备 #

首先在邮件模板的根<html>标签上添加VML命名空间声明，这是容易被遗漏的前提步骤：

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

完整实现代码 #

背景区域用表格做容器（邮件模板兼容通用写法），同时适配普通邮件客户端和Outlook客户端：

<!-- 背景区域外层容器，宽度按你的邮件模板实际宽度设置，常规EDM宽度为600px -->
<table width="600" border="0" cellpadding="0" cellspacing="0" style="width:600px; background-image: url('你的背景图地址'); background-repeat: no-repeat; background-size: 100% 100%; background-color: #f6f6f6;">
  <tr>
    <td>
      <!-- 以下为Outlook专属VML背景逻辑 -->
      <!--[if gte mso 9]>
      <v:rect fill="true" stroke="false" style="width:600px;height:替换为背景区域实际高度px;position:absolute;">
        <v:fill type="frame" src="你的背景图地址" color="#f6f6f6" aspect="atleast" size="100%,100%" />
        <v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:false;">
      <![endif]-->

      <!-- 所有邮件实际内容（文字、按钮、内层内容表格）全部放在这个区域 -->

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

关键配置说明 #

• 外层表格自带的background-repeat: no-repeat、background-size属性，是给苹果邮件、网页端邮箱、Foxmail等非MSO内核客户端用的兜底样式
• 你之前代码失效的核心原因是v:fill缺少两个关键属性：aspect="atleast"指定图片至少撑满整个容器，size="100%,100%"让填充尺寸和容器完全匹配，缺了这两个属性Outlook会默认回退到平铺模式
• v:rect必须显式写死和容器一致的宽高，不能留空，Outlook的VML引擎不支持相对单位，宽高单位统一用px
• v:textbox的inset="0,0,0,0"是去掉VML默认自带的内边距，避免内容出现偏移；mso-fit-shape-to-text:false防止VML形状被内容撑得变形
• stroke="false"是去掉VML矩形默认的黑色边框，避免出现多余线条

避坑提示 #

• 背景图尽量使用JPG格式，Outlook 2007-2016版本渲染透明PNG格式的VML背景时会出现黑边bug
• 核心文字内容不要贴边放置，建议留至少20px的安全内边距，避免个别Outlook版本渲染时出现轻微图片偏移挡住文字
• 如果做全宽通栏背景，把外层表格宽度改为100%，v:rect的宽度也对应设为100%，内层固定宽度的内容表格加align="center"实现居中即可

内容的提问来源于stack exchange，提问作者Sayali Shinde