Kontaktiere uns

HTML Newsletter: Hintergrundbilder (background-image) für Outlook

Acki-1024
Christoph Ackermann
newctBg
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...
 Acki-1024
Artikel von
 Christoph Ackermann
Vom Sa­ni­tärin­stal­la­teur zum Un­ter­neh­mer – das ist mein Wer­de­gang in einem Satz. Täg­lich be­strebt, Kun­den glü­ck­lich zu ma­chen und das In­ter­net auf den Kopf zu stel­len. Co­de­schnip­sel zum Früh­stück, be­rei­chern­de Mee­tings zur Mit­tags­pau­se und eine Bash zum Ein­schla­fen. Wenn mal nicht im Büro, dann ent­we­der im Se­gel­flug­zeug, in der Werk­statt unter einem Young­ti­mer oder mit Freun­den in der Stadt Bern an­zu­tref­fen.
 
Abonniere 
unseren Newsletter
Nur wertvolle Infos – kein Spam. Mit der Ameldung bestätigst Du, dass wir Dir einmal im Monat eine Zusammenfassung der neuesten Themen im Web-Bereich als E-Mail zusenden dürfen.
Mehr Artikel wie dieser
 WordPress-Version-herausfinden-scaled
Welche WordPress Version habe ich? So findest Du es heraus!
WordPress ist das beliebteste CMS der Welt, mit welchem sich neben Blogs auch ganze Webseiten erstellen lassen. Da WordPress regelmässig und fleissig verbessert wird, kann…
 
   
 WordPress-Version-6.1
WordPress 6.1 – Alle Neuerungen mit webP und dem neuen Twenty Twenty-Three Standard-Theme im Überblick
Das dritte grosse WordPress Update in diesem Jahr steht vor der Türe. Mit WordPress 6.1 kommen am 1. November 2022 wieder zahlreiche Neuerungen auf uns…
 
   
 DSC00931
Wie wir ACF Blocks mit Handlebars Templating einsetzen
Mittels Handlebars Templating trennen wir Logik sauber vom Inhalt. Auf diese Weise können wir übersichtliche, einfache und performante Templates für WordPress Editor Blocks erstellen, welche…
 
   
 iphonebig-small
iPhone Bildschirmgrössen – (k)ein Hexenwerk für Webdesigner?
iPhone-Bildschirm Messgrössen iPhone Bildschirmgrösse in Zoll (Display Size, Inches) Dies ist die Bildschirmgrösse in Zoll, gemessen von einer Ecke zur anderen. Genau so, wie auch Bildschirmgrössen von…
 Acki-1024
 
Christoph Ackermann
 
   
 WordPress-6.0-Blogpost-scaled
Vorstellung von WordPress 6.0 – Neue Blöcke und mehr Performance
Seit dem 24. Mai 2022 ist mit WordPress 6.0 die zweite Hauptversion in diesem Jahr veröffentlicht worden. Benannt wurde die Version nach Jazzmusiker Arturo O’Farrill.…
 
   
 nested-pages-seo-framework-polylang-wordpress
So kombinieren wir Nested Pages, SEO Framework & Polylang in WordPress
Bei vielen Kundenwebseiten setzen wir auf das Plugin Nested Pages, um Seitenstruktur besser sehen (und verwalten) zu können. Ohne dieses Plugin sieht die Anzeige von…
 
   
 WordPress-Login-URL-Guide (1)
WordPress Login – so bekommst Du Zugang zu Deinem Dashboard
Gerade für WordPress Anfänger, aber auch bei fortgeschrittenen Benutzern, kann es oft schwierig sein, sich bei seinem Konto anzumelden. Im folgenden Beitrag werde ich Dir…
 
   
 WordPress-Zeitplan
WordPress 6.0: Entwicklerteam gibt Zeitplan der neuen Version bekannt
Update: WordPress 6.0 wurde am 24. Mai 2022 veröffentlicht Wie Matias Ventura Ende Januar schrieb, soll WordPress 6.0 ein Abschluss der Phase 2 des Gutenberg-Projekts…
 
   
 WordPress-5.9
WordPress 5.9 – Was ist neu und kommt mit dem Update
Ursprünglich sollte WordPress 5.9 (Josephine) bereits am 14. Dezember 2021 veröffentlicht werden, wurde jedoch wegen offenen Problemen nach mehrfachen Verschieben nun am 25. Januar 2022…
 
   
 WordPress-Bilder-und-Medien-scaled
WordPress Bilder und Medien: Alles was du wissen musst
Bilder sind ein grosser und wichtiger Bestandteil einer modernen Webseite. Sie helfen dem Besucher und Leser, Dinge zu visualisieren und lockern auch gerne lange Beiträge…
 
   
 cubetech-wordpress-core
Warum unsere Kunden ihre Webseite kaputt layouten können
Einleitung / Basics Bereits seit einiger Zeit haben wir unseren neuen cubetech Core im Einsatz. Intern nennen wir das Ding liebevoll „gutenbase“ – eine Mischung…
 
   
 Bild-Tech-Talk2jpg-scaled
Tech Talk – „Advanced Custom Fields“ Plugin
Bereits seit langer Zeit setzen wir bei unseren WordPress-Installationen auf das populäre Plugin «Advanced Custom Fields» (nachfolgend ACF). Dieser Beitrag zeigt, wie wir unsere Webseiten…