lesliehui, 2 years ago

I tried everything i could, but the background image is not appearing in Outlook 2010.

Any kind souls able to help?


<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Wheelock Properties - Christmas eCard</title>
<style type='text/css'>v'\':* {behavior: url(#default#VML); display:inline-block;}</style>
</head>
<body>
<table border="0" align="center" cellpadding="0" cellspacing="0" width="600">
    <tr>
        <td height="30" align="center" valign="top" style="font-family:Helvetica, Arial, sans-serif; font-size:11px">If you can't view this eCard, please click <a href="http://www.wheelockproperties.com.sg/ecard/christmas/2013/" title="" target="_blank" style="color:#f48221">here</a></td>
    </tr>
    <tr>
        <td background="http://www.wheelockproperties.com.sg/ecard/christmas/2013/images/wheelock_Christmas_e-card_01.gif" height="57" width="600" bgcolor="#a00000">
        <!--[if gte mso 9]>
        <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:57px; width:600px;top:0;left:0;border:0;z-index:1;' src="http://www.wheelockproperties.com.sg/ecard/christmas/2013/images/wheelock_Christmas_e-card_01.gif"/>
        <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:62px; width:610px;top:-5;left:-10;border:0;z-index:2;'>
        <div>
        <![endif]-->
        <!-- This is where you nest a table with the content that will float over the image -->
        <table width="600" cellpadding="0" cellspacing="0" border="0">
        <tr>
        <td width="600" height="57" align="center" valign="middle" style="font-family:'Times New Roman', Times, serif; font-size:16px; color:#fff">
        Dear Andrea Ong,
        </td>
        </tr>
        </table>
        <!-- This ends the nested table content -->
        <!--[if gte mso 9]>
        </div>
        </v:shape>
        <![endif]-->
        </td>
    </tr>
    <tr>
        <td height="468"><img style="display:block" src="http://www.wheelockproperties.com.sg/ecard/christmas/2013/images/Wheelock_Christmas_e-card_02.gif" width="600" height="469" border="0" /></td>
    </tr>
    <tr>
        <td background="http://www.wheelockproperties.com.sg/ecard/christmas/2013/images/Wheelock_Christmas_e-card_03.jpg" height="74" width="600" bgcolor="#a00000">
        <!--[if gte mso 9]>
        <v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:74px; width:600px;top:0;left:0;border:0;z-index:1;' src="http://www.wheelockproperties.com.sg/ecard/christmas/2013/images/Wheelock_Christmas_e-card_03.jpg"/>
        <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:79px; width:610px;top:-5;left:-10;border:0;z-index:2;'>
        <div>
        <![endif]-->
        <!-- This is where you nest a table with the content that will float over the image -->
        <table width="600" cellpadding="0" cellspacing="0" border="0">
        <tr>
        <td width="600" height="74" align="center" valign="top" style="font-family:'Times New Roman', Times, serif; font-size:16px; color:#fff">
        Best Wishes,<br />Sylvia Sim
        </td>
        </tr>
        </table>
        <!-- This ends the nested table content -->
        <!--[if gte mso 9]>
        </div>
        </v:shape>
        <![endif]-->
        </td>
    </tr>
    <tr>
        <td height="30" align="center" valign="bottom" style="font-family:Helvetica, Arial, sans-serif; font-size:11px">&copy; 2013 Wheelock Properties. All rights reserved.</td>
    </tr>
</table>
</body>
</html>
thecomputernerd, 2 years ago

All of this VML code only works part of the time. Outlook is very glitchy. Sometimes I have to click the table cell for the background to even appear. Sometimes when you open the email it appears. Next time you open the same email it doesn't appear. I notice the regular <img> all load fine. But the vml images are always cranky and unreliable.

thecomputernerd, 2 years ago

Also the vml images dont load if you put multiple of them in one email. (Very Glitchy)

JohnP JohnP, 2 years ago

If you are looking for an alternate to VML, use this method

This will work for the whole email only - not an individual element. This works in Outlook 2010 and is how we used to do it before Stig discovered the magic of VML. ;)

Sorry if this technique has been covered earlier in the thread - I just skimmed through.

CourtFantinato, 2 years ago

I have had no issues with getting a repeating Body background working in Outlook - VML really isn't needed IMO. You need three pieces:

- The background="background.jpg" attribute on your 100% width table for Outlook.com - no, it's not valid, but it works!
- Background CSS styles on your 100% width table for Yahoo.
- Background CSS styles on the Body for everything else.

This covers most major email clients, but should still be thoroughly tested.

The only issue is you can NOT use a solid colour fallback (by either using CSS background-color or attribute bgcolor) on the 100% width table as Outlook 07+ will use it, covering the background styles on the Body. You can have a colour fallback with the Body styles though.

As for a background on a single TD, using the Background attribute and CSS background styles on the TD itself does work for most major email clients except Outlook 07+. So I could see the VML potentially being useful there, though the drawback with VML is the images have to already be hosted.

  1. 1
  2. 7
  3. 8
  4. 9

Join 150,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098