Orange Marketing Blog

Hintergrundbilder auch in HTML-E-Mails? Mit einem einfachen Trick ist das tatsächlich möglich!

15. Juli 2010 |

Autor: Ali Mostofian |

Kommentare und Reaktionen

X

Orange Marketing Newsletter - Jetzt Anmelden:

Oft scheitern schöne Newsletter-Designs daran, dass aufwendige Grafiken erstellt werden müssen bzw. Texte in Grafiken eingebettet werden müssen und somit jede Änderung am Text auch gleichzeitig eine Grafik-Änderung mit sich bringt. Ein viel größeres Problem ist es jedoch, wenn Grafiken geblockt werden! Denn dann sieht man auch keinen Text!

Das Problem kann man nun mit einem einfachen Trick umgehen! Hier sehen sie die Anleitung, wie Sie Grafiken auch als Hintergrundbilder in Ihren HTML-E-Mails einbinden können!

Schritt 1 - Sie müssen zuerst den normalen <html> Tag mit diesen ersetzen:
<html xmlns:v=”urn:schemas-microsoft-com:vml”>

Schritt 2 - Danach fügen Sie in dem CSS-Bereich folgende Anweisung ein:
v:* { behavior: url(#default#VML); display: inline-block; }

Schritt 3 - Jetzt gehen Sie zum <td> Tag, wo Sie das Hintergrundbild einfügen möchten und verfahren Sie wie folgt:
<td width=”[breite]” height=”[höhe]” valign=”top” background=”[hintergrundbild].gif”>
<!–[if gte vml 1]>
<v:image style=’width:[breite];height:[höhe];position:absolute;top:0;left:0;border:0;z-index:-1;’ src=”[hintergrundbild].gif” />
<![endif]–>
Die Angaben in den eckigen Klammern [] müssen Sie natürlich mit Ihren eigenen ersetzen!

Probieren Sie diesen Beispiel-Code aus und überzeugen Sie sich selber. Sie müssen nichts anpassen. Einfach den Code kopieren, als HTML speichern und testen:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns:v=”urn:schemas-microsoft-com:vml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Background Images? ORLY?</title>
<style type=”text/css”>
v\:* {
behavior: url(#default#VML);
display:inline-block;
}
body {
background-image:url(’http://www.thiespublishing.com/images/arrow.gif’);
background-repeat: repeat-y no-repeat;
margin:0;
padding:0;
}
</style>
</head>
<body>
<table width=”100%” cellpadding=”0″ cellspacing=”0″ border=”0″ background=”http://www.thiespublishing.com/images/arrow.gif”>
<tr>
<td align=”center”><table width=”600″ cellpadding=”0″ cellspacing=”0″ border=”0″>
<tr>
<td width=”600″ height=”402″ valign=”top” background=”http://www.thiespublishing.com/oneimage.gif”>
<!–[if gte vml 1]>
<v:image style=’width:600px;height:402px;position:absolute;top:0;left:0;border:0;z-index:-1;’ src=”http://www.thiespublishing.com/oneimage.gif” />
<![endif]–>
<div align=”center” style=”font-size:18px; color:#ffffff; font-family:Arial, Helvetica, sans-serif;”>This is the test</div>
<div align=”center” style=”font-size:18px; color:#ffffff; font-family:Arial, Helvetica, sans-serif;”>If you can see this over the image<br />background images are successful.</div>
</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

Diese Methode wurde bereits getestet und funktioniert in den meisten E-Mails Clients außer Lotus Notes 6/7. In Outlook 2003/2007 und 2010 wird mit diesem Trick die Anzeige des Hintergrundbildes erzwungen!

Quelle:
CampaignMonitor: Please test this Outlook 2007/2010 background image solution
Oxagile: Background images for Outlook 2007 and Outlook 2010 beta

Trackback-URL: http://blog.orangemarketing.de/2010/07/15/hintergrundbilder-auch-in-html-e-mails-mit-einem-einfachen-trick-ist-das-tatsachlich-moglich/trackback/