Bulletproof Email Background Images
VML
for Outlook 2007/2010/2013, and HTML/CSS for Outlook 2000/2003, Gmail, Hotmail,
et al.
The URL to your background image
Host your image on your own web server, or a free service like
imgur
(use “Direct Link” URL).
Fallback color
Shown if the background image
isn’t loaded
, and behind images that have transparency.
Apply background image to
Full email body
Tile the background image in the full email window.
A single table cell
Tile the background image in only a restricted part of a table based layout.
Table cell width
px*
Full email width
Fixed width
<td>
, or full width
<table>
.
Table cell height
px*
Fit to content
Fixed height, or adapt naturally to table cell content.
* Treated as fixed by some email clients, and as a minimum by others. Make sure any fixed heights and widths are larger than the overlaid content.
Add the following right after the opening
<body>
tag…
<div style="background-color:#f6f6f6;"> <!--[if gte mso 9]> <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"> <v:fill type="tile" src="http://i.imgur.com/n8Q6f.png" color="#f6f6f6"/> </v:background> <![endif]--> <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top" align="left" background="http://i.imgur.com/n8Q6f.png">
…and this right before the closing
</body>
tag.
</td> </tr> </table> </div>
Tweet
By
Stig
·
About
·
Bulletproof Email Buttons