Created
September 6, 2022 07:40
-
-
Save DaanDeSmedt/635b446959369e8df8b3c85cd4fb8858 to your computer and use it in GitHub Desktop.
Text over image in HTML email templates with Outlook support
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <table border="0" cellpadding="0" cellspacing="0" width="100%"> | |
| <tr> | |
| <td background="https://www.actamaps.be/cdn/mailings/2022q2biv/header.jpg" bgcolor="#000000" width="700" valign="top" style="background-size: cover;"> | |
| <!--[if gte mso 9]> | |
| <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:700px;"> | |
| <v:fill type="tile" src="https://www.actamaps.be/cdn/mailings/2022q2biv/header.jpg" color="#000000" size="1,1" aspect="atleast" /> | |
| <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"> | |
| <![endif]--> | |
| <div> | |
| <table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:100%; margin: auto;"> | |
| <tr> | |
| <td height="50" style="height: 50px;"></td> | |
| </tr> | |
| <tr> | |
| <td align="center" valign="middle"> | |
| <table width="600"> | |
| <tr> | |
| <td valign="top" style="text-align: center; font-family: 'Poppins', 'Open Sans', Arial, sans-serif; font-size: 25px; line-height: 20px; color: #ffffff;"><span style="margin: 0;"> Hello *|NAME|*, </span></td> | |
| </tr> | |
| <tr> | |
| <td height="20" style="height: 20px; font-size:20px; line-height:20px;"></td> | |
| </tr> | |
| <tr> | |
| <td valign="top" style="text-align: center; font-family: 'Poppins', 'Open Sans', Arial, sans-serif; font-size: 25px; line-height: 30px; color: #ffffff;font-weight: 200;"><span style="margin: 0;"> A saved Gist to never forget how to correctly support text over an image in HTML for emails. Supported for Outlook, with background cover mode. <strong>What a puff it can be...</strong> </span></td> | |
| </tr> | |
| </table> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td height="50" style="height: 50px;"></td> | |
| </tr> | |
| </table> | |
| </div> | |
| <!--[if gte mso 9]> | |
| </v:textbox> | |
| </v:rect> | |
| <![endif]--> | |
| </td> | |
| </tr> | |
| </table> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment