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?

Berner Solidarität

Sarah Berger
Solidarität gehört momentan zum Schweizer Alltag, wie für …
Blogbeitrag ansehen

13 Basisregeln für gute Webtexte

Sarah Berger
“Unsere Experten bieten Ihnen massgeschneiderte Lösungen”, “Wir sichern …
Blogbeitrag ansehen

Interview mit Bijoux Stadelmann: Wie hat die Coronavirus-Krise ihre Geschäftssituation verändert?

Anna Gottschalk
Das Familienunternehmen Bijoux Stadelmann ist ein langjähriger Kunde …
Blogbeitrag ansehen