Posted by

Create Email Template with Background Image

Email marketing today sounds old but it's still worthy. The development of an email template limiting us, because coding it in the modern way was not recommended as it won't be rendered properly on old email clients. Regardless, it won't stop us from putting some spicy in it.

One of methods to make email look good is to have a background image. So here's a sample email template you may use as reference on how you can add background image in your email template.


<!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>

Happy coding!