Search code examples
htmlcssimageemailemail-templates

How to insert this text within image via html?

I have lot's of trial errors to include the text on images on the white side as an email template. I'm not programmer but trying to study how to create email templates since I am a graphic designer. So I'm trying to insert the text within the white space as shown below but I don't how to fix it. I hope you can help me. Thanks! I'm doing this for mail chimp as an email template.

Here's the code:

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Chicology_new</title>

</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" 
marginheight="0">

<img src="https://chicology.com/wp-content/uploads/2017/06/Chicology_new.png" 
width="612" height="612" alt="">


</body></html>

Here's the expected outcome:

enter image description here

Solution

  • I think this is what you are after. A little breakdown: Outlooks 2000 - 2003 renders emails using IE and Outlook 2007+ uses MS Word to render emails. VML is native coding language for Outlook 2007+. I have used VML to show background on outlook email clients and the rest should show the the background image from the ones defined in the TD. 

    <table width="612" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td height="612" valign="top" background="https://chicology.com/wp-content/uploads/2017/06/Chicology_new.png" style="background:url(https://chicology.com/wp-content/uploads/2017/06/Chicology_new.png); background-image: url(https://chicology.com/wp-content/uploads/2017/06/Chicology_new.png);">
	 <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:612px;height:134px;">
    <v:fill type="frame" src="https://chicology.com/wp-content/uploads/2017/06/Chicology_new.png" color="#88d1da" />
    <v:textbox inset="0,0,0,0">
  <![endif]--> 

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td width="44%" align="left" valign="top" style="font-family: Helvetica, Arial, 'sans-serif'; font-size: 12px; color:#000001;padding:50px;">Hi Firstname,<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum, arcu eget pulvinar auctor, dui risus posuere neque, quis ultrices ligula neque vitae lacus. Maecenas imperdiet et libero ut gravida. Vivamus gravida dictum ante, in pulvinar nisl fermentum in. Cras laoreet convallis libero quis sodales. Praesent vel imperdiet ipsum. Cras feugiat ex in felis maximus, et volutpat elit ullamcorper. Integer lacus massa, congue quis mattis nec, sagittis ut elit. <br>
<br>
Aliquam dapibus tincidunt neque, non consectetur magna convallis id. Suspendisse fermentum nibh quis tortor ornare sollicitudin. Nullam nec ornare quam, ut tincidunt nibh. Donec ac tempor erat, a ultricies nisl. Praesent tincidunt condimentum urna sit amet egestas. Cras at molestie est. Proin in eleifend velit, sit amet cursus arcu.
      
      </td>
      <td width="56%">&nbsp;</td>
    </tr>
  </tbody>
</table>

<!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->	
   

   
   
   </td>
    </tr>
  </tbody>
</table>

    There are other ways to approach this as well. Since outlook is the only email client that doesnt show background image without VML, you can use outlook conditional statements to show a whole chunk of code only for outlook and another chunk for other email clients.

    Only Outlook email clients:

    <!--[if mso]>
Content ONLY FOR Outlook
<![endif]-->

    Everything else:

    <!--[if !mso]><!-->
CONTENT NOT for Outlook
<!--<![endif]-->

    you can also target specific Outlook email clients (if need be)

    <!--[if gte mso 9]>
 Outlook email clients greater than Outlook 2000
<![endif]-->

    Breakdown of different versions. Outlook 2000 - Version 9 Outlook 2002 - Version 10 Outlook 2003 - Version 11 Outlook 2007 - Version 12 Outlook 2010 - Version 14 Outlook 2013 - Version 15