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.

Lidahask, 3 days ago

<a href=http://fetti.ru/catalog/kvartiri_94/all_0/>Квартиры объявления Петербург</a>

Ninavex, 2 days ago

В интернет-магазине одежды и обуви Хамелион каждый может выбрать и купить одежду, обувь или аксессуар в 2 клика.
В каталоге интернет-магазина Хамелион более 1000 брендов мужской, женской и детской обуви и одежды разных ценовых категорий, всего более 2000 товаров.
Огромный выбор модных женских платьев в  http://chameleon-shop.ru/ магазине модной одежды Хамелион

Marinama, 2 days ago

<a href=http://crokus-west.ru/>энергофлекс super</a>

IrinaZorp, 2 days ago

"Седьмая симфония Д. Шостаковича в живописи" - http://www.maria-art.com/#!blank/gv9kw

ZinaidaSi, 2 days ago

Друзья, мы создали для Вас ресурс <a href=http://топ-100.рф/>Купоны и скидки</a>, на котором собрали все самые актуальные предложения со скидками на все случаи жизни; поход в ресторан со скидкой 90%, модные магазины со скидками до 90%, турпутёвки со скидками до 60%, красота и здоровье со скидками до 80%, билеты в кино, на концерты и утренники со скидками до 80% и многое другое!!!
Ждём в гости!

<video>https://www.youtube.com/watch?v=MUIRTLIUWis</video>

GoogleGat, 1 day ago

Несколько минут анализировал контент интернет, вдруг к своему восторгу увидел четкий веб-сайт. Ссылка на него: <a href=https://forum.antichat.ru/threads/315614/>Реклама  AdWords</a> . Для нас этот веб-сайт произвел яркое впечатление. Всего хорошего!

Lidahask, 17 hours ago

<a href=http://fetti.ru/catalog/kvartiri_94/all_0/>Квартиры объявления Санкт-Петербург</a>

Ninavex, 10 hours ago

Настоящая женственность – это природное очарование, дополненное ярким и эффектным нарядом. Если тебя вдохновляет шик мировых звезд и ты готова приковывать к себе восторженные мужские взгляды, добро пожаловать в  http://chameleon-shop.ru/ интернет магазин молодежной одежды Хамелион

  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