HTMLメールで背景画像を使う方法

Outlookではbackgroundで背景画像を指定しても表示されません。
そのため、Outlook用のコードを書かなければなりません。

<table border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="max-width:600px;line-height:100%;">
<tr>
<td width="600" height="120"><!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="position:relative;display:block;margin:0;padding:0;width:600px;height:120px;overflow:hidden;" stroke="f">
<v:fill type="tile" src="img/background.png"></v:fill>
</v:rect>
<w:anchorlock/>
<v:shape style="position:relative;top:-5px;width:600px;height:120px;">
<![endif]--><table border="0" cellpadding="0" cellspacing="0" background="img/background.png" style="background-position: bottom center;">
<tr>
<td width="20" style="font-size:0;"><img src="img/spacer.gif" alt="" width="10" height="1" style="display:block;"></td>
<td width="560" valign="top"><table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size:0;" colspan="2"><img src="img/spacer.gif" alt="" width="1" height="10" style="display:block;"></td>
</tr>
<tr>
<td width="40" valign="top" style="font-size:0;"><a href="https://note.com/kanbara3" target="_blank"><img src="img/logo.png" alt="ロゴ画像" width="40" height="40" style="display:block;" border="0"></a></td>
<td width="520" height="110" align="right" valign="top"><span style="color:#ffffff;font-size:12px;line-height:150%;">メールマガジン</span><br>
<span style="color:#ffffff;font-size:16px;font-weight:bold;line-height:150%;">00月号</span></td>
</tr>
</table></td>
<td width="20" style="font-size:0;"><img src="img/spacer.gif" alt="" width="10" height="1" style="display:block;"></td>
</tr>
</table><!--[if mso]>
</v:shape>
<![endif]--></td>
</tr>
</table>

下記がOutlookで背景画像を表示させるためのソースになります。

<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="position:relative;display:block;margin:0;padding:0;width:600px;height:120px;overflow:hidden;" stroke="f">
<v:fill type="tile" src="img/background.png"></v:fill>
</v:rect>
<w:anchorlock/>
<v:shape style="position:relative;top:-5px;width:600px;height:120px;">
<![endif]-->

～　省略　～

<!--[if mso]>
</v:shape>
<![endif]-->

<!--[if mso]><![endif]-->内はOutlookのみのソースとなります。

今回は、600px×120pxの画像の上にロゴやテキストを置くという形になります。
<v:shape>タグの top:-5px; ですが、これはOutlookで上部に少し余白が入ってしまうため、調整しております。
あとは<v:shape></v:shape>内に、通常どおりのテーブル組みをすれば問題ありません。

Outlook以外のメーラーで背景を表示するために、tableにbackgroundを指定しています。

<table border="0" cellpadding="0" cellspacing="0" background="img/background.png" style="background-position: bottom center;">

CSSで位置を調整することが可能です。
スマホの画面幅によって見え方が変わるので、表示位置が変わっても問題ない画像を使ってください。