Menu
I've been using campaign monitor's http://backgrounds.cm/ code for single fixed height/width <td>s which works great across all desktop clients, but we're moving to full width emails and I can't get the full width option to display correctly in any mso version of outlook. Namely, this happens:
I've followed their directions and kept their code as the first child of body, but the background extends into where outlook's margins should be.. I'm trying to find a way in outlook to do separate full width background rows.
344
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style>
v:* { behavior: url(#default#VML); display: inline-block; }
</style>
</head>
<body>
<center>
<table width="100%" height="20">
<tr>
<td bgcolor="#dddddd" style="background-image:url('http://placekitten.com/g/500/300');background-repeat:no-repeat;background-position:center;" background="http://placekitten.com/g/500/300" width="100%" height="300">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:300px;">
<v:fill type="frame" src="http://placekitten.com/g/500/300" color="#ffffff" />
</v:rect>
<![endif]-->
</td>
</tr>
<tr>
<td bgcolor="#33cc99">
<table border="0" cellpadding="5" cellspacing="0"><tr><td height="5"><table border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr></table></td></tr></table>
</td>
</tr>
<tr>
<td bgcolor="#ffff99" style="background-image:url('http://placekitten.com/g/500/300');background-repeat:no-repeat;background-position:center;" background="http://placekitten.com/g/500/300" width="100%" height="300">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:300px;">
<v:fill type="frame" src="http://placekitten.com/g/500/300" color="#ffffff" />
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</center>
</body>
</html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style>
v:* { behavior: url(#default#VML); display: inline-block; }
</style>
</head>
<body>
<center>
<table width="100%">
<tr>
<td bgcolor="#dddddd" style="background-image:url('http://placekitten.com/g/500/300');background-repeat:no-repeat;background-position:center;" background="http://placekitten.com/g/500/300" width="100%" height="300">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:300px;">
<v:fill type="tile" src="http://placekitten.com/g/500/300" color="#ffffff" />
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</center>
</body>
</html>
Here is an example, two rows, the first row has 3 columns with 3 separate background images, the second row spans all the way across as one background image.
<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td style="width: 300px; height: 80px; background-image: url('http://placekitten.com/g/300/80');">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 300px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/300/80" />
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 300px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
<div>
<![endif]-->
<table width="300" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td height="80" align="center" valign="top" style="color:#ffffff;font-size:20px;">
<span>Text</span>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>
<td style="width: 100px; height: 80px; background-image: url('http://placekitten.com/g/100/80');">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 100px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/100/80" />
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 100px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
<div>
<![endif]-->
<table width="80" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td height="80" align="center" valign="top">
<span>Text</span>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>
<td style="width: 200px; height: 80px; background-image: url('http://placekitten.com/g/200/100');">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 200px; height: 80px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/200/100" />
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 200px; height: 80px; top: -5; left: -10; border: 0; z-index: 2;'>
<div>
<![endif]-->
<table width="200" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td height="80" align="center" valign="top" style="color:#ffffff;font-size:20px;">
<span>Text</span>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>
</tr>
</table>
<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td style="width: 600px; height: 150px; background-image: url('http://placekitten.com/g/600/150');">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 600px; height: 150px; top: 0; left: 0; border: 0; z-index: 1;' src="http://placekitten.com/g/600/150" />
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 600px; height: 150px; top: -5; left: -10; border: 0; z-index: 2;'>
<div>
<![endif]-->
<table width="600" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tr>
<td height="150" align="center" valign="top" style="color:#ffffff;font-size:20px;">
<span>Text</span>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>
</tr>
</table>
141
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
