Posted By

mjenos on 04/04/12


Tagged

email template


Versions (?)

Applying Background Images to Email Newsletters


 / Published in: HTML
 

URL: http://www.campaignmonitor.com/blog/post/3363/updated-applying-a-background-image-to-html-email/

Applying Images to HTML table cells

  1. //As outlined in our previous post, 'Add a background image to your email in two simple steps', this method uses a table of width="100%" to ensure that background images display in clients like Gmail. However, Brian Thies' updated approach varies in that it uses Microsoft VML to force images to display in Outlook '07 & '10. Here's the code in two steps. First, there's the Microsoft-specific HTML namespace declaration:
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns:v="urn:schemas-microsoft-com:vml">
  5. <head>
  6. <table width="600" cellpadding="0" cellspacing="0" border="0">
  7. <tr>
  8. <!-- Backup background color is #DDDDDD -->
  9. <td bgcolor="#DDDDDD" style="background-image: url('http://www.example.com/background_image.jpg');" background="http://www.example.com/background_image.jpg" width="600" height="120" valign="top">
  10. <!--[if gte mso 9]>
  11. <v:rect style="width:600px;height:120px;" strokecolor="none">
  12. <v:fill type="tile" color="#DDDDDD" src="http://www.example.com/background_image.jpg" /></v:fill>
  13. </v:rect>
  14. <v:shape id="theText" style="position:absolute;width:600px;height:120px;">
  15. <![endif]-->
  16. <p>If you can see this over the image, background images are successful.</p>
  17. <!--[if gte mso 9]>
  18. </v:shape>
  19. <![endif]--></td>
  20. </tr>

Report this snippet  

You need to login to post a comment.