Search code examples
htmlhtml-emailoutlook-2010newsletter

Outlook newsletter background image and text


I'm having some difficulties adding text and a background image to a TD in a newsletter, below the code I've used to display them. The background is visible, but the text is not being displayed.

       {if !empty($aModules.mkNews)}
            {foreach name=mkNews from=$aModules.mkNews item=mkNews}
                 <td width="230" style="background:url(http://www.example.com/images/content/mkNews/{$mkNews.mkNewsID}/image_{$mkNews.image|getImage:'_big'}) no-repeat center center; text-align: center; font-size: 14px; color: white; font-family:verdana; padding: 20px 0; line-height:22px;">
                     <table background="http://www.example.com/images/content/mkNews/{$mkNews.mkNewsID}/image_{$mkNews.image|getImage:'_big'}" width="230" height="230">
                         <tr>
                             <td style="text-align: center; font-size: 14px; color: white; font-family:verdana; padding: 20px 0; line-height:22px;">
                             <!--[if gte mso 9]>
                             <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block; height:230px; width:230px; border:0; z-index:1;' src="http://www.example.com/images/content/mkNews/{$mkNews.mkNewsID}/image_{$mkNews.image|getImage:'_big'}"/>
                             <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:230px; width:230px; top:0; left:0; border:0; z-index:2;'>
                             <![endif]-->
                             {$mkNews.message}
                             <!--[if gte mso 9]>
                             </v:shape>
                             <![endif]-->
                             </td>
                         </tr>
                     </table>
                 </td>
             {/foreach}
         {/if}

Can anybody point me in the right direction? I don't have much experience with the v-tags that outlook uses.

Thanks in advance!


Solution

  • Thanks for the help, I figured it out.

    The following code works, the text is visible.

        <!--[if gte mso 9]>
            <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block; height:230px; width:230px; border:0; z-index:1;' src="http://www.example.com/images/content/mkNews/{$mkNews.mkNewsID}/image_{$mkNews.image|getImage:'_big'}"/>
            <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block; position:absolute; height:230px; width:230px; top:-20px; left:0; border:0; z-index:2;'>
            <![endif]-->
            <table width="230" height="230" border="0" cellspacing="0" cellpadding="0">
                <tr height="230">
                    <td width="230" style="text-align: center; font-size: 14px; color: white; font-family:verdana; line-height:22px;">{$mkNews.message|convertEncoding:'utf8_decode'|regex_replace:"/[\]/":""}</td>
                </tr>
            </table>
            <!--[if gte mso 9]>
            </v:shape>
            <![endif]-->
    

    The text should be in a extra table, then it's visible in outlook 2010.