CODEWITHSUNDEEP
html-email
Shannon Bell
Shannon Bell

Reputation: 11

Trouble overlaying text onto an image in a HTML email for Outlook

I have written this for a header image on an email newsletter, which allows the text and button to overlay the image and also be responsive. When testing it works well in most browsers except Outlook 2007, 2010 and 2013.

Is there anyway to make it compatible with these email clients?

Thanks

<tr>
    <td height="auto" align="center" valign="top">
        <table border="0" cellpadding="0" align="center" cellspacing="0" width="100%" id="templateHeader" >
            <tr>
                <td valign="top" height="auto" class="headerContent">
                  <table width="100%" border="0" align="center">
                        <tr>
                            <td class="image-wrapper"> 
                            <img src="header.jpg" width='100%' alt="Header image" /> 
                                <p align="center" class="headerContent1">Heading<br>
                                5th July 2015
                                    <!--[if mso]>
                                  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.website.ca/" style="height:30px;v-text-anchor:middle;width:160px;" stroke="f" fillcolor="#53a0ce">
                                    <w:anchorlock/>
                                    <center>
                                  <![endif]-->
                                    <a href="http://www.website.com/"
                                    style="background-color:#53a0ce;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:30px;text-align:center;text-decoration:none;width:160px;-webkit-text-size-adjust:none;">Book Now</a>
              <!--[if mso]>
                </center>
              </v:rect>
            <![endif]-->
                                </p>    
                            </td>
                        </tr>
                    </table> 
              </td>
            </tr>



.image-wrapper { position: relative; width: 100%; } 

.image-wrapper p { position: absolute; left: 0; top: 0; padding-top: 10%; padding-left:25%; padding-right:25%; border: 0px solid #FFF; width: 50%; color: #FFF; margin: 0; }

Upvotes: 1

Views: 3178

Answers (2)

Gortonington
Gortonington

Reputation: 3587

If I understand the question, your issue is that the content doesn't display over the image. This is due to Outlook's compatibility with the CSS you are using.

For instance, 'position' is not acceptable in any form for Outlook which just this alone breaks your code. Padding is also only partially accepted by Outlook.

You should also always use an absolute path and hex value and not shorthand for emails.

CSS Compatibility - https://www.campaignmonitor.com/css/

Your best bet is to use the 'Bulletproof Background' that Campaign Monitor offers. This combined with the bulletproof button tool should help get you there. Neither of these are as absolutely accurate as they claim, but they will at least get you on the right path.

Upvotes: 1

JoePhillips
JoePhillips

Reputation: 721

You could try adding a background image to the td tag.

<td class="image-wrapper" background="header.jpg">

The only thing is you will not have the alt tag.

Upvotes: 0

Related Questions