De truc met de achtergrondafbeelding
Welke e-marketeer heeft al niet eens een dosis hoofdpijn verzachtende middelen tot zich moeten nemen omdat de achtergrondafbeelding in zijn e-mailcampagne hardnekkig weigerde zich correct te vertonen. Vooral in Microsofts liefste, de e-mailclient Outlook, wil het vaak misgaan. Een Amerikaanse internaut puzzelde net zo lang, tot hij een sluitende oplossing gevonden had. We willen deze graag met je delen.
Stappenplan
Bij het creëren van je HTML e-mailbericht moet je drie stappen uitvoeren om de achtergrond afbeeldingen op een perfecte wijze te laten uitkomen. Om te beginnen moet je de html-tag vervangen door:
<html xmlns:v="urn:schemas-microsoft-com:vml">
Vervolgens moet je in de definitie van je CSS ook een paar extra regels toevoegen. Zoals steeds moet de CSS van je e-mailbericht meegegeven worden in de HTML. Linken naar een externe style sheet is nog steeds uit den boze.
v\:* {
behavior: url(&default;VML);
display:inline-block;
}
body {
background-image:url('http://www.ditismijndomein.com/afbeeldingen/mini_symbool.gif');
background-repeat: repeat-y no-repeat;
margin:0;
padding:0;
}
Het spreekt vanzelf dat je de link aanpast aan je eigen situatie. Deze CSS zorgt er voor dat je net een stukje behangpapier met terugkerende tekening als achtergrond krijgt.
Tenslotte moet je, als je in de tabel ook met achtergronden wil werken volgende code integreren in de <td> tag:
<td width="600" height="402" valign="top"
background="http://www.ditismijndomein.com/achtergrondbeeld.gif">
<!--[if gte vml 1]>
<v:image
style='width:600px;height:402px;position:absolute;top:0;left:0;border:0;z-in
dex:-1;' src="http://ditismijndomein.com/achtergrondbeeld.gif" />
<![endif]-->
Ook hier moet je natuurlijk de link als de breedte en de hoogte van je <td> aanpassen aan je eigen ontwerp.
Succesvol
De truc werd opgepikt door heel wat collega’s e-marketeers die het zelf ook aan een praktijktest onderwierpen. En uiteindelijk ontstond er een lijstje van e-mailclients die de hierboven werkwijze perfect verteren en de achtergrondafbeelding correct weergeven.
• AOL Mail (Explorer & FireFox)
• AppleMail 3 & AppleMail 4
• Gmail (Explorer & FireFox)
• iPad
• iPhone
• Lotus Notes 8
• Mail.com (Explorer & FireFox)
• Me.com (Explorer & FireFox)
• Outlook 2002/XP, 2003, 2007, 2010
• Outlook Web Access
• Postbox
• Thunderbird 2.0 & 3.0
• Windows Live Mail
• Windows Mail
• Windows Mobile 6.5
• Yahoo! Mail (Explorer & FireFox)
Alleen in Lotus 6.5 / 7 wil het nog steeds niet lukken. Maar dat mag de pret niet bederven!
