Create Email Template with Background Image

Email marketing today sounds old but believe it or not, it's still kicking as strong as horse! I thought it was dying but after being assigned temporarily to work on a team specialized on it, it turns out that I was wrong. I was assigned to create email template for them by the way.

Anyway, we all know that we can’t code the html in a modern way when creating an email template right? That’s because of email clients’ eternal love for traditional table layouts :p. And if you’re doing an email templates occasionally, probably you do not know that you can apply a background image to it just like me. Yes a background image!

Here’s a sample code for you to test.

<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<table width="600" border="0" cellspacing="0" cellpadding="0" style="width: 600px;" align="center">
<tbody>
<tr>
<td width="600" height="150" align="left" background="https://www.cyfervoid.com/media/images/hello-world.jpg" style="background-repeat:no-repeat;">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='display:block; position:absolute; height:150px; width:600px; top:0; left:0; border:0; z-index:1;' src="https://www.cyfervoid.com/media/images/hello-world.jpg"/>
<v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='display:block; position:absolute; height:150px; width:600px; top:10; left:0; border:0; z-index:2; color:#FFFFFF;'>
<![endif]-->
<table width="600" border="0" cellspacing="0" cellpadding="0" height="150" style="width: 600px">
<tbody>
<tr>
<td align="center" style="font-family:Arial; color:#ffffff; font-size:26px; font-weight:bold; padding-left:10px; text-align:center; ">
Hello World
</td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]>
</v:shape>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</body>
</html>

 I believed the code is pretty self explanatory on how it works by just looking at it :).

I hope it helped someone. Happy coding!

Tagged with