CSS background-image property not working in Outlook
The problem is that both Outlook
2007/2010 and Hotmail do not support CSS background-image property for
any element except body tag. So which
difference between these two versions leads to this issue? Answer is:
Outlook 2003 uses Internet Explorer to render HTML emails. Unfortunately
Outlook 2007 uses Microsoft Office for this purpose. So Outlook 2007/2010 does
not support background-image property same as older Outlook versions do. But
everybody who works with Microsoft word faces the situation when he/she needs
to insert an image behind the text.
Outlook also has the same possibility, but with some restrictions.
At first we should say that
Microsoft word uses VML (Vector Markup
Language) to produce vector graphics. This language allows including
different figures, shapes and images in Microsoft Word. The most important
thing for us is that VML supports image absolute positioning and z-indexes.
Here is the simplest code to insert a background image (for
table td) into an HTML email for MS Outlook:
//-------------------------------------------------------------Start VML Code-------------------------------------------------------------//
<td>
<!--[if gte mso 9]>
<v:image
xmlns:v="urn:schemas-microsoft-com:vml" id="theImageTop"
style='behavior: url(#default#VML); display:inline-block; position:absolute;
height:131px; width:813px; top:0; left:0; right:0; bottom:0; border:0;
z-index:1;'
src="http://www.mindstick.com/newsletter/headerimg.png"/>
<v:shape
xmlns:v="urn:schemas-microsoft-com:vml" id="theTextTop"
style='behavior: url(#default#VML); position:absolute; display:inline-block;
height:131px; width:700px; border:0; z-index:2;'>
<![endif]-->
<p> Your text here which you want to show on backgroung
image. You can use here html tag too</p>
<!--[if gte mso 9]>
</v:shape>
<![endif]-->
</td>
//----------------------------------------------------------------End VML Code-----------------------------------------------------------//
The first set of previews demonstrated that the background
image indeed displayed for Outlook 2007 and Outlook 2010. However, two problems
were evident within these clients. First of all, the text within the hack was
completely un-styled, even with the inline styles present. Secondly, the image
displayed shifted out of the table cell, a few pixels downward and right.
Here some attributes like top, height, width, position and
style etc having some values it is define according to my requirement, and you
can change these values according to your code.