After a whole day of searching the internet why tiling background won’t show up in a e-mail template when viewing the mail in Outlook 2007 or Outlook 2010 I finally found the answer on stackoverflow.
The funny thing is that repeating background work in Outlook 2003, Outlook 2000, Gmail and in all the other e-mail clients that we test our mailinglist templates with. Although it seems that background images don’t work in Lotus Notes; is somebody still using this? 😉
We did test a big scala of approaches; pictures in a div, inline styling, relative placement of transparant overlay, vxml hook with fixed size, size in percentages, etc.
The solution is actually quite easy. In the cell that opens your current background shizzle add:
<!--[if gte mso 9]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 200px;"> <v:fill type="tile" src="http://www.formatics.nl/yourbackground.png" color="#f6f6f6" /> <v:textbox style="mso-fit-shape-to-text: true;" inset="0,0,0,0"> <![endif]-->
Then at the end of the cell, where you want your background to stop:
<!--[if gte mso 9]> <p style="margin:0;mso-hide:all"><o:p xmlns:o="urn:schemas-microsoft-com:office:office"> </o:p></p> </v:textbox> </v:rect> <![endif]-->
You can find an easy complete example on stack overflow, copy pasteable:
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF">
<table background="http://i.imgur.com/n8Q6f.png" cellpadding="0" cellspacing="0" width="200">
<tr>
<td>
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 200px;">
<v:fill type="tile" src="http://i.imgur.com/n8Q6f.png" color="#f6f6f6" />
<v:textbox style="mso-fit-shape-to-text: true;" inset="0,0,0,0">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100"></td>
<td bgcolor="#ffffff" width="100">
The<br/>
background<br/>
image<br/>
on<br/>
the<br/>
left<br/>
will<br/>
stretch<br/>
to<br/>
the<br/>
height<br/>
of<br/>
this<br/>
content.
</td>
</tr>
</table>
<!--[if gte mso 9]>
<p style="margin:0;mso-hide:all"><o:p xmlns:o="urn:schemas-microsoft-com:office:office"> </o:p></p>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
We found some other weird issues/behaviours while testing our mail in some webclients like Gmail en Hotmail. Webmail clients can have line-height definitions that overrule line-heights! Outlook appears to skip background for table cells completely; so we often use a table cell containing an img element and a background image for the cell. Gmail and other clients will load the background; Outlook 2007 en Outlook 2010 will load the image element. This can get you in problems when content pushes the height of the cell above the image element height. You will get missing gaps in the content.
The problem: The browser already has previous line-height definitions from rendering the Gmail layout; it will/can apply this line-height on your cells. To avoid this we sometimes apply a fixed line-height to “design cells”.
An example:
<td bgcolor="#2caae1" height="10" width="600" colspan="3" background="http://i.imgur.com/n8Q6f.png" valign="bottom" style="background-image: url(http://i.imgur.com/n8Q6f.png); background-position: top; line-height: 71%;">
<img src="http://i.imgur.com/n8Q6f.png" border="0" height="10" width="600">
</td>
In Hotmail, Outlook.com and Gmail: it would create a table cell with height=18 instead of the wanted and expected 10. The style=”line-height: 71%;” will, forcefully correct that. Better suggestions are welcome.