css - How to create a multi email client html template such that background image with text on top is displayed in all clients? -
i trying add background image table element tr email html template. there text displayed @ top of image.
the text dynamic coming from field can not make image in table elements.
the code have follows
<tr> <td background="http://bit.ly/1hxqys9" bgcolor="#c0393f" style="background-image: url('http://bit.ly/1hxqys9');width:600px;height:240px" width="600" height="240" valign="top" > <!--[if gte mso 9]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:240px;"> <v:fill type="tile" src="hhttp://bit.ly/1hxqys9" color="#c0393f" /> <v:textbox inset="0,0,0,0"> <![endif]--> <p style="color:#c9be8a;font-weight:700;font-size:19px;width:220px; text-transform:uppercase ;margin:147px 0px 0px 107px; "> hello. text. </p> </td> </tr>
the problem background image not displayed in following email clients
- outlook 2007, outlook 2010, outlook 2011, outlook 2013, gmail firefox, gmail chrome, outlook.com explorer, outlook.com chrome, yahoo mail explorer,yahoo mail chrome
can put code inside table , try. think work
<table border="0" cellpadding="0" cellspacing="0" align="center"> <tr> <td background="http://bit.ly/1hxqys9" bgcolor="#c0393f" style="background-image: url('http://bit.ly/1hxqys9');width:600px;height:240px" width="600" height="240" valign="top" > <!--[if gte mso 9]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:240px;"> <v:fill type="tile" src="hhttp://bit.ly/1hxqys9" color="#c0393f" /> <v:textbox inset="0,0,0,0"> <![endif]--> <p style="color:#c9be8a;font-weight:700;font-size:19px;width:220px; text-transform:uppercase ;margin:147px 0px 0px 107px; "> hello. text. </p> </td> </tr> </table>