How to create a multi email client html template such that background image with text on top is displayed in all clients?

Question

I am trying to add a background image to a table element tr for email html template. There is also a text that is displayed at the top of the image.

The text is dynamic coming from a from field so I can not make it as image in table elements.

The code I have is as 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. This is my text.
                 </p>
            </td>
        </tr>

The problem with this is that the background image is not displayed in the 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

Alias Varghese · Accepted Answer · 2015-04-23 05:31:42Z

can you put the code inside a table and try. I think it will 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. This is my text.
                 </p>
            </td>
        </tr>
</table>

Collectives™ on Stack Overflow

How to create a multi email client html template such that background image with text on top is displayed in all clients?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related