lesliehui, 3 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, 3 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, 3 years ago

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

JohnP JohnP, 3 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, 3 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.

RaisaLow, 6 months ago

Есть сильное желание, но не знаешь как развести девушку?
Просто сделай ей кофе или угости стаканчиком сока с чудо-средством природного происхождения и через 15 минут она сама тебя попросит...

<b><a href=http://kshop2.biz/VtphOk/>Do it</a></b>! вызывает несдержимое желание у женщины уже через 15 минут!!!
Натуральные компоненты стимулируют приток крови к эрогенным зонам дамы — гениталиям и соскам. Активируют процессы полового возбуждения и ускоряют передачу сигналов от нервных окончаний в мозг.
Наконец то в России...
<a href=http://kshop2.biz/VtphOk/><img>http://putana.club/img/d0-it.jpg</img></a>

RaisaLow, 6 months ago

Есть сильное желание, но не знаешь как развести девушку?
Просто сделай ей кофе или угости стаканчиком сока с чудо-средством природного происхождения и через 15 минут она сама тебя попросит...

<b><a href=http://kshop2.biz/VtphOk/>Do it</a></b>! вызывает несдержимое желание у женщины уже через 15 минут!!!
Натуральные компоненты стимулируют приток крови к эрогенным зонам дамы — гениталиям и соскам. Активируют процессы полового возбуждения и ускоряют передачу сигналов от нервных окончаний в мозг.
Наконец то в России...
<a href=http://kshop2.biz/VtphOk/><img>http://putana.club/img/d0-it.jpg</img></a>

RobertFuedo, 6 months ago

Good morning. By the way, I have read a blog about it. It was mentioned, that 
content for your site is much better and more reliable than usual web-hosting.
I wanted to ask how reliable these systems are?

RobertFuedo, 6 months ago

Good morning. Recently I have read a blog about it. It says, that 
dedicated server core quad
is much better and more reliable than conventional web-hosting.
I want to know the opinion of professionals, is that right?

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

200,000 companies around the world can't be wrong.

From Australia to Zimbabwe, and everywhere in between, companies count on 
Campaign Monitor for email campaigns that drive real business results.

Get started for free
1-888-533-8098