Blog
    C#
    ADO.Net
    .NET
    ASP.Net & Web Forms
    Custom Controls
    Web Development
    Exception Handling
    XML
    Database
    Security in .Net
    Testing
    Web Services
    Windows Services
    Windows Controls
    WCF
    AJAX
    WPF
    XAML
    Reporting
    Setup
    VB.Net
    LINQ
    JQuery
    SilverLight
    JavaScript
    HTML5
    Crystal Report
    Cloud Computing
    Share Point
    Visual C++
    MVC
    Android
    PHP
    Java
    HTML
    WordPress
    Joomla
    Products
    Drupal
    Windows Phone
    JSON
    LightSwitch
    iPhone/iPad
    Ruby on Rails
    IIS 7
    Windows 8
    CSS/CSS3
    Excel
    MS Access
    Shortcut Keys
    Visual SourceSafe
    Team Foundation Server
    API(s)
    Sencha-Touch
Follow Us
Follow _MindStick_ on Twitter View MindStick Software's LinkedIn profile View MindStick Software's Facebook profile
Top Contributor
Advertisement
Advertise with Us
Mindstick
Article Article  Forum Forum  Blog Blog  Quiz Quiz  Beginner Beginner  Careers Careers  Contact Contact  Login Login  
Home | Product | Services | About Us | Interview | DeveloperSection | Submit an Article | Submit Blog
Report Abuse Form
Reason:    
 

Home >> HTML >> CSS background-image property not working in Outlook
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.
Views: 1269     Comments: 1
by Arun Singh on 7/24/2012

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.   


Problem
by All Blacks on 10/16/2012
I try this code and other that i found with google.
With all of these code my background image is showing properly but the text doesn't appear.
When i look in the source code of outlook email i can see the text in the alt of the v:shape.

<v:shape id="_x0000_s1026" type="#_x0000_t75" alt="Your text here which you want to show on backgroung image. You can use here html tag too" style='position:absolute;margin-left:0;margin-top:0;width:525pt;height:98.25pt;z-index:251660288;visibility:visible;mso-width-percent:0;mso-height-percent:0;mso-wrap-distance-left:9pt;mso-wrap-distance-top:0;mso-wrap-distance-right:9pt;mso-wrap-distance-bottom:0;mso-position-horizontal:absolute;mso-position-horizontal-relative:text;mso-position-vertical:absolute;mso-position-vertical-relative:text;mso-width-percent:0;mso-height-percent:0;mso-width-relative:page;mso-height-relative:page'>
<v:imagedata src="cid:image002.emz@01CDABA2.237E64F0" o:title="" />
</v:shape>
Report Abuse
Title :  
Comment :
Text ColorBackground Color
BoldItalicUnderline
LeftCenterRightJustify
Ordered ListBulleted List
IndentOutdent
Horizontal Rule
SubscriptSuperscript
HyperlinkImage
Design ModeDesign
View HtmlHtml
       
 
Report Abuse Form
Reason:    
 
Latest ArticleRSS Feed
    
    
    
    
    
    
    
    
    
    
More...
Latest Blogs by Arun SinghRSS Feed
    
    
    
    
    
    
    
    
    
    
More...
Top Viewed ArticlesRSS Feed
    
    
    
    
    
    
    
    
    
    
Top Viewed BlogsRSS Feed
    
    
    
    
    
    
    
    
    
    
Latest Interview QuestionsRSS Feed
    
    
    
    
    
    
    
    
    
    
More...
Total Online Users: 2691
  
Copyright © 2009 - 2013MindStick. All Rights Reserved.