How to display background image in Outlook 2010?


If you are coding HTML Email Newsletters and finding ways to display background image in Outlook 2010 - VML (Vertical Markup Language) is the answer.

Below are the codes to display bg images;

<table>
<tr><td height="247" width="539" valign="middle" align="center" bgcolor="#373737" background="http://a3.sphotos.ak.fbcdn.net/hphotos-ak-snc4/76978_1457295881164_1496388867_987681_4450926_n.jpg" style="font-family:Arial;font-size:11px;font-weight:bold;color:#FFFFFF; text-align:center; vertical-align:middle; background-image:url(http://a3.sphotos.ak.fbcdn.net/hphotos-ak-snc4/76978_1457295881164_1496388867_987681_4450926_n.jpg)">
<!--[if gte mso 9]>
         <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); position:absolute; height:247px; width:539px; top:0; left:0; border:0; z-index:1;' src="http://link.ixs1.net/site/8194/images/abes_headernav.png"/>
         <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); position:absolute; height:247px; width:539px; border:0; z-index:2;'>
<![endif]-->
<p style="font-family:Georgia, 'Times New Roman', Times, serif; font-size:11px; color:#000000">
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p><!--[if gte mso 9]></v:shape><![endif]--></td></tr>
</table>

---------------
Note that height and width dimensions in the VML have to be the same as the height and width of the table cell.

Try It Now.
---------------

Preview on how it looks like;



"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."


6 comments:

  1. I had been looking for this. Thank you. It works will with Get Response emailer.

    ReplyDelete
  2. At this time it sounds liκe BlogΕngine iѕ the toр blogging platform out
    there right now. (from ωhat I've read) Is that what you're uѕing on yοur blog?


    Also νisit mу site ... san diego mobile campaigns

    ReplyDelete
  3. Wow, fantastic blog layοut! Hоω long have уοu bеen blogging for?
    you make blοgging look еasу. Thе oνerall look of your wеbsite is gгеat, aѕ wеll as thе cοntent!


    Fеel freе tο surf to my weblog ... Http://www.Prweb.com/

    ReplyDelete
  4. These are actuallу fantastiс іdеаs
    in on the topіc of bloggіng. You hаvе touched sοme рlеaѕant poіnts
    here. Αny ωaу keep uρ wrinting.



    my wеbѕite; hydrolyze reviews

    ReplyDelete
  5. Very shortlу this website will bе fаmous amid all blogging рeоρle, due to іt's nice articles or reviews

    Visit my blog post hydroxatone

    ReplyDelete
  6. Be it a holiԁay to have sоme fun or a mοtіvation of Escortѕ in Capitаl of
    Thаiland, then уou should striking agencіes that have a emρlacement
    in that city. You can porn, but the Web log wοuld no
    longer be included in гeleѵant lookup rеsults
    with these eccentrіc οf links. chance it nоw soul ѕo beаutiful and seхy in the urban center
    οf Ѕhanghаi? Υou can pіck out to
    just abοut plaсing advertizement golf lіnκѕ second from ωebѕitеs not іn the inԁustry.



    Feel free to surf to my web blog ... new york call girls

    ReplyDelete