Background Images Email
Long regarded as too unreliable to use in email, adventurous email designers have overcome the odds over the last few years, developing a technique that will work with every major email provider (and platform), and even the most stubborn forms of Outlook. It is now possible to install background images for entire body of the email, or for a specific table cell.
Full Body Backgrounds
Seting your background image at the ‹body› level will work fine for some desktop environments, but this technique is not comprehensive, and will leave you hanging across a variety of major email clients. To get around this, we will create a container table covering the entire email body, and set the background image there.
Container Table Between your body tag and the first table of your email content, this includes a ‹div> portion, a ‹VML> layer, then a ‹table>, a ‹tr> row, and finally the «td> table cell where the content of your message takes place.
‹body›
‹div style="background-color:#7bceeb;"›
‹!--[if gte mso 9]›
‹v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"›
‹v:fill type="tile" src="https://____.png" color="#7bceeb"/›
‹/v:background›
‹![endif]--›
‹table height="100%" width="100%" cellpadding="0"
cellspacing="0" border="0"›
‹tr›
‹td valign="top" align="left" background="https://____.png"›
Close It Off Be sure to finish what you started, by closing the table and the div, before the &lsaquo/body› tag at the end of your creative:
‹/td›
‹/tr›
‹/table›
‹/div>
‹/body›
Using VML In order to make your background image work in Outlook 2007, 2010, and 2013, it will be necessary to insert a background image by inserting VML between your div layer and your table layer.
Start by using [if gt mso 9] to specify Outlook, and insert a VML background image:
‹!——[if gte mso 9]›
‹v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"›
‹v:fill type="tile" src="https://____.png" color="#7bceeb"/›
color="#7bceeb"/›
‹/v:background>
‹![endif]-->
Table Cell Backgrounds
Specifying the background of an individual table cell is a similar process to the creative, except this time, the VML layer goes in between the td table cell and the content of that cell
‹td background="https://____.png" bgcolor="#7bceeb"
width="120" height="92" valign="top"›
‹!--[if gte mso 9]›
‹v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true"
stroke="false" style="width:120px;height:92px;"›
‹v:fill type="tile" src="https://____.png" color="#7bceeb" /›
‹v:textbox inset="0,0,0,0"›
‹![endif]--›
‹div›
Be sure to close off your td cell properly
‹/div›
‹!--[if gte mso 9]›
‹/v:textbox›
‹/v:rect›
‹![endif]--›
‹/td›
Limitations & Expectations
It's a whole new world for background images, but unfortunately we are not quite there yet.
In web design, it is possible to control your background image in a variety of ways, including position, repeat, size, and more.
While certain email clients can support these features, limited CSS compatibility makes most of these off-limits.
Here are a few critical aspects of background images that cannot be controlled using this technique
- Repeat Controlling which direction a background image repeats is a powerful tool, but you won't have access to that. By default, the image will repeat for the X and Y axis.
- Aligment Without background-position, your background image will be fixed to the left of the table cell. It will not be centered, stretched or changed
- Size You can kiss background-size goodbye, don't even think about using convenient phrasing like “100%” or “cover”
