I try to create an email with an image in a table as background image. I found a part of code that supposedly should work. In most email clients it does work, though in outlook 2010 I see the image, but not the text. Is there anything that I can do to make it work?
I found multiple pages like <a href="http://iamskwerl.com/tech/2011/11/html-emails-outlook-and-background-images/" rel="nofollow">http://iamskwerl.com/tech/2011/11/html-emails-outlook-and-background-images/</a> and <a href="http://www.campaignmonitor.com/blog/post/3363/updated-applying-a-background-image-to-html-email/" rel="nofollow">http://www.campaignmonitor.com/blog/post/3363/updated-applying-a-background-image-to-html-email/</a> but it did not got me further.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HVAC Success Confirmation</title>
</head>
<body style="background-color: #999999; vertical-align: top;">
<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td style="width: 600px; height: 350px; background-image: url('http://epicreviewsdotorg.files.wordpress.com/2011/05/unicorn1.jpg');">
<!--[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: 350px; top: 0; left: 0; border: 0; z-index: 1;' src="http://epicreviewsdotorg.files.wordpress.com/2011/05/unicorn1.jpg" />
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display: inline-block; position: absolute; width: 600px; height: 350px; 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="350" align="center" valign="top" style="padding-top:80px">
<p>This table in here has a bunch of stuff I want to lay over the background image...</p>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>I found multiple pages like <a href="http://iamskwerl.com/tech/2011/11/html-emails-outlook-and-background-images/" rel="nofollow">http://iamskwerl.com/tech/2011/11/html-emails-outlook-and-background-images/</a> and <a href="http://www.campaignmonitor.com/blog/post/3363/updated-applying-a-background-image-to-html-email/" rel="nofollow">http://www.campaignmonitor.com/blog/post/3363/updated-applying-a-background-image-to-html-email/</a> but it did not got me further.