I've been struggling with this for a while now and I can't get any answer.
I wanted to use background image in the email template which works fine on all email clients like gmail, yahoo, etc using background attribute on HTML table. But this fails on Outlook Desktop Email. So for this I used VML and was able to do that.
But the issue with this is that the background image loads only after clicking the background area.
<table width='600' height='800' align='center' style='min-hwight:800px;' cellpadding='0' cellspacing='0'>
<tr>
<td background='[background-image]' bgcolor='#baeef7' width='600' height='800' valign='top' align='center'>
<!--[if gte mso 9]>
<v:rect xmlns:v='urn:schemas-microsoft-com:vml' fill='true' stroke='false' style='width:600px;height:800px;'>
<v:fill type='tile' src='[background-image]' color='#baeef7' />
<v:textbox inset='0,0,0,0'>
<![endif]-->
<div>
<table align='center' width='600' height='800' style='width:600px;height:800px' cellpadding='0' cellspacing='0'>
<tr height='80'>
<td width='175' style='width:175px;text-align:right;' align='right'>
Header Image
</td>
<td width='250' style='width:250px;'></td>
<td width='175' style='width:175px'></td>
</tr>
<tr>
<td width='175' valign='bottom' style='width:175px'><img src='https://www.subsource.com/ContentPages/images/template-1-175.png' alt='' /></td>
<td width='250' height='160' valign='middle' style='padding:0 7px;width:250px'>
<span style='font-size:36px;text-align:left;color:#fff;text-transform:uppercase;display:block; font-family: Myriad Pro, Gill Sans, Calibri, sans-serif;font-weight:bold;letter-spacing: 1px;'>
Some Text HERE
</span>
</td>
<td width='175' style='width:175px' valign='bottom'></td>
</tr>
<tr height='250'>
<td width='175' style='width:175px'> </td>
<td style='width:250px;height:250px;text-align:center;width:175px' height='250' width='250' cellpadding='0' cellspacing='0'>
<div style='background-color: #FFFFFF;margin:0;padding:0;width:250px;height:250px;'>
Image Here
</div>
</td>
<td width='175' style='width:175px'> </td>
</tr>
<tr>
<td width='175' valign='top' style='width:175px'> </td>
<td width='250' valign='top' style='width:250px;color: #119346; text-align: left; font-family: Myriad Pro, Gill Sans, Calibri, sans-serif;padding:0 7px'>
<div style='font-size: 30px;line-height:1; font-family: Myriad Pro, Gill Sans, Calibri, sans-serif;text-transform:capitalize;font-weight:bold;'>Hello Abc</div>
<div style='font-size: 17px;line-height:1;margin-top: 4px;font-family: Myriad Pro, Gill Sans, Calibri, sans-serif;text-transform:capitalize;font-weight:bold;'> Address: 123 456 798 789 </div>
<div style='font-size: 15px;line-height:18px; font-family: Myriad Pro, Gill Sans, Calibri, sans-serif;margin-top:5px;'> Some text goes here. Some text goes here. Some text goes here. Some text goes here.
</div>
</td>
<td width='175' valign='top' style='width:175px'> </td>
</tr>
<tr>
<td width='175' height='65' style='width:175px'></td>
<td width='250' height='65' style='width:250px'></td>
<td width='175' height='65' style='width:175px'></td>
</tr>
<tr height='30'>
<td colspan='3'> </td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr></table>
Please suggest me some solution. This is the requirement that I need to fulfill.
Thanks
