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> 

Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

utf 8 - split utf-8 string into bytes in python -