advanced code snippet search

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

Expand | Embed | Plain Text 
  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>
  21. </table>

Report this snippet  

You need to login to post a comment.