<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>