Christoph S. Ackermann

Letzte Woche haben wir ein umfassendes Newsletter-Template umgesetzt. Dabei kamen auch die jeweiligen Spezialitäten der Mailclients an’s Tageslicht.

 

Auch in der heutigen Zeit fahren etliche Hersteller immer noch eigene Wege in der Interpretation von HTML Newslettern, insbesondere macht hier auch Outlook keine Ausnahme. Microsoft hat entschieden, in Outlook die HTML-Engine von Word zu verwenden, was unter anderem auch die Verwendung von Tabellen nötig macht.

 

Eines der Spezialthemen sind Hintergrundbilder im HTML Newsletter. Können diese für einige Mailclients noch per CSS implementiert werden, so muss für Outlook ein sehr spezieller Weg gegangen werden.

 

Der entsprechende HTML-Teil kann z.B. so aussehen:

<table>
 <tr>
  <td style="background-image: url(background.png);">
   <h1>Titel</h1>
   <p>Einiges an Text.</p>
  </td>
 </tr>
</table>

 

Möchte man nun die Funktionalität für Outlook umsetzen, so kommen ein paar Codezeilen dazu:

<table>
 <tr>
  <td style="background-image: url(background.png);">
   <!--[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:402px; width:600px;top:0;left:0;border:0;z-index:1;' src="background.png"/>
    <v:shape xmlns:v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:402px; width:600px;top:-5;left:-10;border:0;z-index:2;'>
    <div>
   <![endif]-->
   <h1>Titel</h1>
   <p>Einiges an Text.</p>
   <!--[if gte mso 9]>
    </div>
    </v:shape>
   <![endif]-->
  </td>
 </tr>
</table>

So hat man nun auch die Hintergrundfunktion für Outlook.

Achtung: Nicht vergessen, die Grösse des Hintergrundbildes im v:image und v:shape anzugeben.

 

Unter fixoutlook.org kann man eine Ansage gegen Microsoft via Twitter machen…

One response to “HTML Newsletter: Hintergrundbilder (background-image) für Outlook

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Lust auf mehr?

Über Pfingsten geschlossen

Fabienne Mast
Liebe Besucherin, lieber Besucher Unser Büro ist über …
Blogbeitrag ansehen

Hoppy Easter und viel Erfolg bei der Osternästlisuche!

Elodie Forti
Wir verabschieden uns für ein paar Tage ins …
Blogbeitrag ansehen