CODEWITHSUNDEEP
html-emailemail-client
Mohan Balaji
Mohan Balaji

Reputation: 23

Email template - Background image with text overlay at Center location

I'm building a HTML-mail where should be an image with a number on top of it. So far I have added the image as a td-background with a nested table to position the text. It looks good in most email clients, except… Outlook. Outlook renders the text - to the top (Outlook 2003) - too high (Outlook 2007 and up)

Example this : Example Image

My code is :

<table width="100%" height="280" border="0" cellspacing="0" cellpadding="0">    <tr>
      <td>
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td bgcolor="#ffffff" valign="middle">
                  <div>
                     <table width="100%" border="0" cellspacing="0" cellpadding="0"
                        align="center">
                        <tr>
                           <td background="https://i.ibb.co/1ztK68Q/banner2.jpg"
                              bgcolor="#ffffff" valign="middle" height="280" class="bg"
                              style="background-size:cover !important; -webkit-background-size:cover !important; background-repeat:none;">
                              <!--[if gte mso 9]>
                              <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:680px; height: 360px">
                                 <v:fill type="frame" src="https://i.ibb.co/1ztK68Q/banner2.jpg" color="#0a4a5e" />
                                 <v:textbox inset="0,0,0,0">
                                    <![endif]-->
                                    <div>
                                       <table width="100%" border="0" cellspacing="0"
                                          cellpadding="0" align="center">
                                          <tr>
                                             <td>
                                                <table width="100%" height="280" border="0"
                                                   cellspacing="0" cellpadding="0"
                                                   align="center" valign="middle">
                                                   <tr>
                                                      <td class="h1 m-h1 center pb25"
                                                         style="color:#ffffff; font-family:'Encode Sans', Arial,sans-serif; font-size:28px; font-weight:800; line-height:46px; text-align:center; vertical-align: middle;">
                                                         <a href="#" style="font-family:'Poppins', Arial,sans-serif; font-size:14px;line-height:17px; text-align:left; color:#000000; font-weight:700; text-decoration:none;"><img src="https://i.ibb.co/LgTBmqp/play.png"
                                                            width="64" height="64"
                                                            border="0" alt="" /></a>
                                                      </td>
                                                   </tr>
                                                </table>
                                             </td>
                                          </tr>
                                       </table>
                                    </div>
                           </td>
                        </tr>
                     </table>
                  </div>
                  <!--[if gte mso 9]>
                  </v:textbox>
                  </v:rect>
                  <![endif]-->
               </td>
            </tr>
         </table>
      </td>    </tr> </table>

See Outlook Output image : See Outlook Output image

Upvotes: 0

Views: 282

Answers (1)

Nathan
Nathan

Reputation: 5259

Try changing the inset from <v:textbox inset="0,0,0,0"> to <v:textbox inset="0,140px,0,0">- depending on how you've set it up, that should work like margin (except they've jumbled which one is which - 2nd value is the inset-top).

You'll also need to change your values in the Outlook conditional to pt instead of px. To convert, multiply by 0.75 (although your starting values were too high - looks like designed for 600px width overall, so start there).

I might have removed a redundant table but otherwise I think that was the only changes.

This works well:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!--[if !mso]><!-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="format-detection" content="telephone=no"><!-- Disable telephone linking in iOS -->
        <title></title>
    </head>
    <body style="margin: 0px; padding: 0px; min-width: 100%;">
        <div id="wrapper"><center style="width: 100%; table-layout: fixed; -ms-text-size-adjust: 100%; background-color: rgb(236, 81, 37); -webkit-text-size-adjust: 100%;"><!--[if (gte mso 9)|(IE)]><table width="100%" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;" bgcolor="#ec5125" ><tr><td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" ><![endif]-->
        <div class="webkit" style="max-width: 600px;"><!--[if (gte mso 9)|(IE)]>
<table role="presentation" width="600" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family: Arial, sans-serif;color:#333333;" >
<tr>
<td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
<![endif]-->
        
                    <table align="center" style="font-family:Arial, sans-serif;color:#333333;font-size:16px;margin:0 auto;width:100%;max-width:600px;" cellpadding="0" cellspacing="0" role="presentation">
                        <tbody>
                            <tr>
                                <td valign="middle" bgcolor="#ffffff">
                                <div>
                                <table width="100%" align="center" border="0" cellspacing="0" cellpadding="0">
                                    <tbody>
                                        <tr>
                                            <td width="600" height="280" class="bg" background="https://i.ibb.co/1ztK68Q/banner2.jpg" valign="middle" style="background-size: cover; -webkit-background-size: cover;width:100%;height:auto;" bgcolor="#ffffff"><!--[if gte mso 9]><v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:450pt;height:210pt"><v:fill type="frame" src="https://i.ibb.co/1ztK68Q/banner2.jpg" color="#0a4a5e" /><v:textbox inset="0,140px,0,0"><![endif]-->
                                            <div>
                                            
                                                        <table width="100%" height="280" align="center" border="0" cellspacing="0" cellpadding="0" valign="middle">
                                                            <tbody>
                                                                <tr>
                <td class="h1 m-h1 center pb25" style='text-align: center; color: rgb(255, 255, 255); line-height: 46px; font-family: "Encode Sans", Arial,sans-serif; font-size: 28px; font-weight: 800; vertical-align: middle;'><a style='text-align: left; color: rgb(0, 0, 0); line-height: 17px; font-family: "Poppins", Arial,sans-serif; font-size: 14px; font-weight: 700; text-decoration: none;' href="#"><img width="64" height="64" alt="" src="https://i.ibb.co/LgTBmqp/play.png" border="0"></a></td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                        
                                            </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                </div>
                                <!--[if gte mso 9]></v:textbox></v:rect><![endif]--></td>
                            </tr>
                        </tbody>
                    </table>
        <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--><!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></div>
        </center></div>
    </body>
</html>

Upvotes: 1

Related Questions