How to Add Background Image to email template?

Can someone help me to add a background image to the email template?

Asked 12 Aug, 17 at 01:29 AM

Tim Martin
Html Css

Answer

Background images are like an icing on the cake in marketing emails. You have worked hard on the content of the email, now if you back it with an awesome background image that has a close connection with either your brand or the content of your email, you are adding to the chances of getting better conversion rates.


The table attribute approach

Look, I’ve written some darn ugly code in my time, but I still get itchy when I use tables. In so much as we shy from them, it should come as no surprise to you folks at home that a fair few table attributes are fairly well supported by the major email clients… And in particular, background.

So, the first thing you can do is to wrap your newsletter content in a table of width="100%", so it spans the width of the reading pane. Then, add the attribute, background=background_image.png and it should all be roses. Here’s how:

<table cellpadding="0" cellspacing="0" border="0" width="600">
 <tr>
<td background="https://image.mail.hotels.com/lib/fec715777267017c/m/51/rewards_swoosh_bg_600x112.png" style=" background-color:#98006a; background: url('https://image.mail.hotels.com/lib/fec715777267017c/m/51/rewards_swoosh_bg_600x112.png') #98006a center top no-repeat; background-position: top center; background-repeat: no-repeat no-repeat;" bgcolor="#98006a" valign="top">
 <!--[if gte mso 9]>
 <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" ">
<v:fill type="frame" src="https://image.mail.hotels.com/lib/fec715777267017c/m/51/rewards_swoosh_bg_600x112.png" color="#98006a" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
 <![endif]-->
 
 </td>
</tr>
</table>


Try this approach, hope this will fix the issue.

like

Latest Question

Copyright © 2024 Powered by RoyalLogics Best RoyaL Deals