CODEWITHSUNDEEP
htmlcssemailoutlookgmail
Hello World
Hello World

Reputation: 13

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

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

Upvotes: 1

Views: 234

Answers (1)

Alias Varghese
Alias Varghese

Reputation: 2170

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>

Upvotes: 0

Related Questions