Showing posts with label Background Images. Show all posts
Showing posts with label Background Images. Show all posts

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."