/ 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
//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: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <table width="600" cellpadding="0" cellspacing="0" border="0"> <tr> <!-- Backup background color is #DDDDDD --> <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"> <!--[if gte mso 9]> <v:rect style="width:600px;height:120px;" strokecolor="none"> <v:fill type="tile" color="#DDDDDD" src="http://www.example.com/background_image.jpg" /></v:fill> </v:rect> <v:shape id="theText" style="position:absolute;width:600px;height:120px;"> <![endif]--> <!--[if gte mso 9]> </v:shape> <![endif]--></td> </tr> </table>
You need to login to post a comment.