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
A lot of email marketing companies are going to be breathing a lot easier now that this has been found.
Wonder how guys that are going to be sending spam will be using this to their advantage.
Posted by Dror Zaifman on 07/21/2010 01:25 AM
Well, I don’t believe ‘spammers’ really take a whole lot of time designing and coding their emails anyway, so I doubt they’ll start embedding background images into their blasts.
Posted by Bryan Quilty on 07/21/2010 03:19 PM
How does this hack affect the rendering in other email clients? Is this something that you should only use when sending to outlook users?
Posted by Chris Byran on 10/01/2010 02:01 PM
@Chris -
The conditional statements used in the code affects Outlook 2007/2010 allowing them to display background images using VML. All other email clients will ignore the additional code and display as usual.
Posted by Brian Thies on 10/19/2010 12:19 AM
sweet! You mention outlook 2010. Any testing done on outlook 2010 yet? Does the same hack work? I can do my own testing, just curious to see if you’ve seen success using this hack with 2010 yet.
Thanks for sharing Brian. This little hack could really bring some changes to the way we code.
Posted by chris bryan on 11/15/2010 02:27 PM
Anyway to make the image repeat
Posted by Robert on 03/03/2011 11:44 AM
Unfortunately no - the VML object required to enable the background requires a set height and width. This also means no way to integrate into a template that requires flexible height sections.
The only repeatable image for Outlook 2007/2010 is the body’s background.
Posted by Brian Thies on 03/03/2011 02:15 PM
When i use this technique my image actually overlays the text, so you can’t see the text?
Posted by Aron on 09/14/2011 05:58 AM
It may have something to do with the z-index. Try dropping the value to -1.
Posted by Bryan on 09/14/2011 09:31 AM
I wouldn’t use -1 anymore or your image would be covered by any backup background colors. I’ve provided the code in detail at Campaign Monitor which shows the best method of overlaying the text on top of the image. http://www.campaignmonitor.com/forums/viewtopic.php?id=3862
Posted by Brian Thies on 09/14/2011 09:56 AM
It was only a matter of time before someone figured it out! Thanks for the information!
Posted by Netwave Interactive on 07/19/2010 11:04 AM