MindComet

Outlook 2007 Can Now Render Background Images

For the past 3 years, designers and marketers alike have been trained to avoid implementing background images into their email’s designs. This was due to Outlook 2007’s inability to display such images. We all just kinda accepted Outlook’s faults and our collective emails designs were held back. But, alas, we will be deprived no more!

It has recently been discovered by a user of CampaignMonitor that background images can indeed display in Outlook 2007! But not without some hacking, of course.

First you have to add xmlns:v=“urn:schemas-microsoft-com:vml” to your html tag.

Secondly, within your style tag, add the following selector:

v\:* {
  behavior: url(#default#VML);
  display:inline-block;

Then, within your table cell, you must add:

<td width="600" height="402" valign="top" bgcolor="#000000" background="images/yourimage.gif">
  <!—[if gte mso 9]>
  <v:image id="image" style='position:absolute; height:402px; width:600px;top:0;left:0;border:0;z-index:1;' src="images/yourimage.gif"/>
  <v:shape id="text" style='position:absolute; height:402px; width:600px;top:0;left:0;border:0;z-index:2;'>
  <![endif]—>
  <p align="center" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:18px;">This is the text in front of the background image.</p>

<!—[if gte mso 9]>
  </v:shape>
  <![endif]—>

Believe it or not, the combination of the steps above allows for background images to render in Outlook 2007. Try it out yourself. I'll be testing this all day today, if I come up with any issues, I'll be sure to update this post. If you find anything, please share them and comment below or on the original thread at Campaign Monitor.

Posted by Bryan Quilty on Jul. 15, 2010

Comments

Name:

Email:

URL:

Comment:

Notify me of follow-up comments?