USING BACKGROUND IMAGES IN EMAILS - Dec 29th, 2018

*** If anyone has improvements to this recipe, please let me know. *** A web page that I was sending as an email had a background image that was to cover the full email window. Since my page was potentially long, the background image I used was a 1920px x 1920px .jpg image that I kept under 150kb by lowering the quality. It took a bit of fiddling to get that background image to display correctly since every email client handles code a bit differently. To display the background image in Outlook variants I found a neat code generator courtesy of Campaign Monitor: http://backgrounds.cm/ It generated this code, which gets inserted just after the opening body tag (change the 2 urls and the backup background color to suit): *** If you use the generator, note the addition below of style="background-repeat:no-repeat" to the table cell that was not in the generated code. <div style="background-color:#00102a;"> <!--[if gte mso 9]> <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t"> <v:fill type="tile" src="http://www.your_site.com/images/bg.jpg" color="#00102a"/> </v:background> <![endif]--> <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="top" align="left" background="http://your_site.com/images/bg.jpg" style="background-repeat:no-repeat"> And this code just before the closing body tag: </td> </tr> </table> </div> For the web page display I added the following css to the head section of the page: <style type="text/css"> body { background-image: url("http://www.your_site.com/images/bg.jpg"); background-repeat: no-repeat; background-color: #00102a; } </style>

Terms of Service