So begeistern Sie jeden Abonnenten ganz einfach mit einem E-Mail-Hintergrundbild (+ der Code dafür!)

Veröffentlicht: 2021-07-23

E-Mails können sich mit einem Bild hier, einem Textblock dort etwas vorhersehbar anfühlen ... Eine Möglichkeit, das Abonnentenerlebnis zu beleben? Hintergrundbilder. Sie sind unerwartet und verleihen Ihrem Design eine weitere Dimension, sodass Ihre E-Mails „knallen“. Wenn sie gut gemacht werden, fühlen sich Ihre E-Mails wie eine Million Dollar an, sind aber unglaublich einfach zu verarbeiten.

Lesen Sie weiter für:

Die Vorteile von Hintergrundbildern
Inspirierende E-Mail-Beispiele
Überlegungen zum Entwurf
So kodieren Sie Hintergrundbilder

Was sind Hintergrundbilder? (Und worum geht es?)

Hintergrundbilder sind Bilder, die auf den Hintergrund oder hinter einem Element angewendet werden. Anstatt wie ein Heldenbild ein Hauptaugenmerk der E-Mail zu sein, sind sie häufiger subtil und ergänzen den anderen Inhalt der Kampagne.

Der Hauptvorteil der Verwendung von Hintergrundbildern besteht darin, dass Sie zusätzliche HTML-Inhalte darüber platzieren können. Im Gegensatz zu anderen Bildern, bei denen nur das Bild selbst in diesem Bereich vorhanden sein kann, bieten Hintergrundbilder Möglichkeiten zum Überlagern, sodass Sie zusätzliche Bilder, Text oder Handlungsaufforderungen (CTAs) in demselben Bereich verwenden können.

Beispiel für Live-HTML-Text und eine kugelsichere Schaltfläche über einem Hintergrundbild

Die Verwendung von Live-HTML-Text über einem Hintergrundbild, anstatt diesen Text als Teil des Bildes einzufügen, bedeutet, dass Ihre Nachricht lesbar ist, wenn Bilder deaktiviert sind. Dies macht dies zu einer großartigen Technik zum Erstellen besserer, leichter zugänglicher HTML-E-Mails.

Hintergrundbilder helfen nicht nur bei der Erstellung von Kampagnen, die ein besseres Leseerlebnis bieten, sondern bieten auch eine Fülle von Gestaltungsmöglichkeiten und heben Ihre Kampagne von der Konkurrenz ab.

Kreative Art und Weise, wie Marken Hintergrundbilder verwenden

Miro platzierte ein Hintergrundbild mit Formen hinter ihrem Heldenbereich, um die Aufmerksamkeit auf die Hauptüberschrift und die Botschaft der E-Mail zu lenken, die mit Live-Text überlagert wird.

Miro-E-Mail mit Hintergrundbild — Quelle: Wirklich gute E-Mails

Upler verwendeten ein Hintergrundbild, um einen Rabatt auf ihre Dienstleistungen hervorzuheben, wobei ein Gutscheinbild hinter einem Gutscheincode platziert wurde.

Uplers E-Mail-Hintergrundbild für Gutscheincode — Quelle: Wirklich gute E-Mails

Figma fügte dem Text dieser E-Mail ein subtiles, sich wiederholendes Hintergrundmuster hinzu, um uns ihr neues Whiteboard-Produkt vorzustellen. Das Muster, das sie aufweisen, spiegelt den Hintergrund des Produkts wider.

Figma Hintergrundbild in E-Mail — Diese E-Mail in Lackmus Builder anzeigen

Chipotle platzierte ein Jumbo-Hintergrundbild hinter diesem beeindruckenden Jumbo-Helden und Körperbereich, einschließlich Produktfotografie und Linienmuster. Über diesem Bild befindet sich ein animiertes GIF mit transparentem Hintergrund und Live-Text im Textbereich.

Chipotle Friendsgiving-E-Mail mit dezentem Hintergrundbild — Quelle: Wirklich gute E-Mails

Animierte GIFs können auch als Hintergrundbilder verwendet werden, wie in diesem Beispiel von Adobe Stock , um festliche Sammlungen mit Heldeninhalten einschließlich Live-Text und einer CTA-Schaltfläche über dem animierten Hintergrund zu fördern.

Adobe Stock-E-Mail mit animiertem GIF-Hintergrundbild — Quelle: Wirklich gute E-Mails

Überlegungen zum Entwurf

Wenn Sie über die Implementierung von Hintergrundbildern nachdenken, sollten Sie einige Designüberlegungen berücksichtigen.

Kontrast

Um sicherzustellen, dass alle Leser den Wert von Inhalten erkennen, die mit Hintergrundbildern überlagert sind, ist es wichtig, auf Kontraste zu achten. Behandeln Sie das Bild ähnlich wie eine flache Farbe und testen Sie die Farben in Ihrem Bild mit den Farben Ihres Inhalts.

Wenn Sie mit Figma entwerfen, können Sie Plugins wie Color Blind und Contrast hinzufügen, um zu sehen, ob Sie die Richtlinien für barrierefreie Webinhalte (WCAG) erfüllen. Es gibt auch eine Reihe von Web-Apps, wie den Contrast Checker von WebAim, mit denen Sie die Farben in Ihren Designs testen können.

Einfachheit

Eine andere Möglichkeit, die Lesbarkeit zu gewährleisten, besteht darin, die Dinge einfach zu halten. Belebte Hintergründe können es schwierig machen, den Wert von Live-Text zu ermitteln, den Sie auf Ihrem Bild platzieren. Daher ist es oft hilfreich, Ihr Hintergrundbild eher als Verbesserung denn als Funktion zu betrachten.

Einfarbiger Fallback

Da nicht alle E-Mail-Clients Hintergrundbilder berücksichtigen, sollten Sie einen Fallback in Volltonfarbe entwerfen. Abonnenten, die E-Mail-Clients verwenden, die Ihre Bilder nicht unterstützen, können dennoch eine großartige Erfahrung mit einer Volltonfarbe machen. Achten Sie darauf, eine Fallback-Farbe zu wählen, die zu Ihrem Design passt und einen guten Kontrast zu den Vordergrundelementen bildet.

So codieren Sie Hintergrundbilder in E-Mails

Bevor ich den Code durchgehe, sehen wir uns an, welche Clients CSS-Styling im Hintergrund rendern und welche die Hilfe eines VML-Fallbacks benötigen.

Die gute Nachricht: Die Unterstützung für Inline-Hintergrund-CSS wurde verbessert, wobei Webmail-Clients diese Methode jetzt vollständig unterstützen, was bedeutet, dass das HTML-Attribut im Hintergrund nicht mehr erforderlich ist.

Die schlechte Nachricht: Leider mag Windows 10 Mail einfach keine Hintergrundbilder. Es wird kein Inline-CSS oder das veraltete HTML-Hintergrundattribut gerendert. Und die Anwendung von VML führt zu Rendering-Problemen mit der Fehlermeldung "Bild kann nicht angezeigt werden".

Wenn Sie sich über die Erfahrung von Windows 10 Mail-Abonnenten Sorgen machen, sollten Sie die VML weglassen. Dadurch wird sichergestellt, dass Fallback-Hintergrundfarben Ihrem Microsoft Outlook Suite-Publikum ein großartiges E-Mail-Leseerlebnis ohne zusätzliche Dekoration bieten.

wie E-Mail-Hintergrundbilder in Windows 10 Mail aussehen

E-Mail-Client-Unterstützung für Hintergrundbilder

E-Mail-Client	Verwenden von Inline-CSS	Verwenden von VML
Apple-Mail 14	✓	✘
Office 365 (Mac)	✓	✘
Office 365 (Windows)	✘	✓
Outlook 2016 (macOS 10.12.6)	✓	✘
Ausblick 2013, 2016, 2019 (Windows 10)	✘	✓
Windows 10 Mail	✘	✘
Gmail-App (Android 10)	✓	✘
Gmail-App (iOS 13.4.1)	✓	✘
Outlook (Android 7.0)	✓	✘
Outlook (iOS 12.0)	✓	✘
Samsung Mail (Android 7.0)	✓	✘
iPad 11 Air (Gen 4 iOS 14.2)	✓	✘
iPhone 12 (iOS 14.2)	✓	✘
AOL-Mail (Edge)	✓	✘
Google Mail (Chrom)	✓	✘
Büro 365	✓	✘
Outlook.com	✓	✘
Yahoo! E-Mail	✓	✘

Welche E-Mail-Clients verwenden Ihre Abonnenten?

Werfen Sie mit Litmus Email Analytics einen Blick auf Ihren eigenen E-Mail-Client-Marktanteil. Sehen Sie, für welche E-Mail-Clients Sie Ihre Hintergrundbilder optimieren müssen. (Hinweis: Wenn Windows 10 Mail niedrig ist, schwitzen Sie nicht.)

Mehr erfahren →

Nun, da wir das aus dem Weg geräumt haben, reden wir über Code!

Eines der lustigen Dinge beim Einfügen von Hintergrundbildern in Ihre E-Mails ist, dass es verschiedene Möglichkeiten gibt, dies zu erreichen. Sie können einen kleinen Abschnitt ausfüllen oder den Text Ihrer E-Mail abdecken, ein einzelnes Bild oder ein Wiederholungsmuster verwenden und Ihre Hintergrundbilder ändern, je nachdem, ob sich Ihr Leser im Desktop-, Mobil-, Hell- oder Dunkelmodus befindet oder sogar wann sie schweben oder rollen über Ihr Bild.

Jede Technik benötigt einen anderen Ansatz, also werfen wir einen Blick auf die besten Möglichkeiten, diese zu codieren.

Breitendefiniertes oder festes Hintergrundbild

Hintergrund mit fester Breite

Beim Anwenden von Hintergrundbildern ist es immer am besten, Ihren Code in die Zelle der enthaltenden Tabelle einzufügen. Die Anwendung auf ein anderes HTML-Element wie <table> oder <body> wird von einigen E-Mail-Clients wahrscheinlich nicht unterstützt. So sollte das aussehen:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

Hier wird das Bild an die Breite und Höhe der Zelle angepasst, indem background-size:cover in die Inline-CSS-Stile aufgenommen und dann in die Mitte positioniert wird. Wenn Sie diese Stile hinzufügen, können Sie ein 2x-Bild verwenden – das bedeutet, dass Sie auf Retina-Displays ein gestochen scharfes Rendering sehen – und die Größe wird so angepasst, dass sie genau in Ihren Container passt, selbst wenn die Größe des Containers für das Rendering auf verschiedenen Geräten geändert wird.

Dies bedeutet jedoch auch, dass Ihr Bild, wenn es zu klein oder nicht proportional zum Container ist, verpixelt oder gestreckt aussehen kann. Vor allem, wenn es um Fotografie geht.

Funktioniert dein Hintergrundbild?

Sehen Sie, wie unser Code für Hintergrundbilder in Ihren eigenen E-Mails in den beliebtesten E-Mail-Apps wie Gmail und Outlook funktioniert.

Mehr erfahren →

Heutzutage unterstützen die meisten E-Mail-Clients Inline-CSS-Hintergrundstyling, sodass Sie Ihr Hintergrundbild und Ihre Fallback-Farbe mithilfe der CSS-Eigenschaft für die Hintergrundkürzel hinzufügen können. Mit anderen Worten, wenden Sie diese einfach auf den Stil „Hintergrund“ an. Leider funktioniert der weitere Hintergrundstil mit Kurzschrift beim Inline-Codieren nicht so gut, sodass jede Positionierung oder Größe als separate Stile geschrieben werden müsste. Verwenden Sie beispielsweise background-position: center; Hintergrundgröße: 80%; statt Hintergrund: Mitte/80%; .

Damit dies in Outlook mit einem VML-Fallback funktioniert

Outlook und Office 365 für Desktop benötigen auch ein wenig Hilfe, um Hintergrundbilder anzuzeigen, da auch sie keine CSS-Hintergrundstile rendern. Damit unser Hintergrundbild in diesen E-Mail-Clients angezeigt wird, müssen wir eine von Stig Morten Myre für Campaign Monitor populäre Technik nutzen und die Vector Markup Language (VML) von Microsoft anwenden.

Mit dem bereits erstellten Code platzieren wir die erforderliche VML und ein enthaltendes <div> in unserer Tabellenzelle:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
<!--[if gte mso 9]>
<v:rect xmlns_v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; background-color:#B5CFE3;">
           <v:fill type="frame" src="fixed-background.jpg" />
           <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
           <![endif]-->
           <div>
<!--add your content here-->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->

    </td>
</tr>
</table>

Für Bilder, die den Container ohne Wiederholung füllen müssen, müssen wir 'frame' innerhalb des vml:fill-Tags verwenden. Auf diese Weise können Sie innerhalb dieses Tags 2x Bilder verwenden. Stellen Sie einfach sicher, dass Sie die Breite Ihres Containers mithilfe von Inline-Styling für das v:rect-Tag festlegen (im obigen Beispiel ist es auf 600px eingestellt).

Wenn Sie Ihren Container auffüllen möchten, können Sie feststellen, dass das Platzieren der VML innerhalb des Containers die Auffüllung zusammenbricht. Die Art und Weise, wie wir dies beheben, besteht darin, die VML um unseren Container zu wickeln, also müssen wir unseren Container wie folgt in eine andere Tabelle verschachteln:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td>
<!--[if gte mso 9]>
<v:rect xmlns_v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; background-color:#B5CFE3;">
<v:fill type="frame" src="fixed-background.jpg" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
    <td style="background: url(fixed-background.jpg) #B5CFE3; background-size:cover; background-position:center;">
<!--add your content here-->
    </td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>

Wiederholtes Hintergrundbild

Sie können auch einen Hintergrund hinzufügen, der sich innerhalb des Containers wiederholt, den Sie platzieren. Ein gutes Beispiel ist, ein Muster im gesamten Text Ihrer E-Mail zu wiederholen.

Beispiel für sich wiederholendes Hintergrundbild

Wenn das Bild, das wir in unserer Containerzelle platzieren, kleiner als der Container ist, wird es automatisch sowohl horizontal als auch vertikal wiederholt. Um in nur eine Richtung zu wiederholen, stylen Sie mit 'background-repeat' CSS und fügen Sie den Wert repeat-x hinzu, um horizontal zu wiederholen oder repeat-y, um vertikal zu wiederholen.

Um den gesamten Behälter mit einem sich vollständig wiederholenden Muster zu füllen, ist der Code sehr einfach:

<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
    <td style="background: url(repeat-background.png) #B5CFE3;">
        <!--add your content here-->
    </td>
</tr>
</table>

Damit dies in Outlook mit einem VML-Fallback funktioniert

Auch hier können Sie VML anwenden, wenn Sie Ihr Hintergrund-Rendering in Outlook-Clients sehen möchten. Der Code ist diesmal etwas anders, wobei die VML vor dem Container platziert wird:

<div>
  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="repeat-background.png" color="#ffffff"/>
  </v:background>
  <![endif]-->
  <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:100%;">
     <tr>
        <td align="center" style="background-image: url(repeat-background.png);">
       </td> 
    </tr>
</table>
</div>

Um den Hintergrund zu wiederholen, füllen Sie das v:fill-Tag mit dem Typ 'tile'. Keine Überraschung, es gibt einige Rendering-Probleme mit Windows 10 Mail, und bei sich wiederholenden Hintergründen können die Rendering-Probleme viel unansehnlicher sein. Das Weglassen der VML ist daher möglicherweise der sicherste Ansatz, wenn Sie Windows 10 Mail-Abonnenten haben.

Fortgeschrittene Techniken

Feste und sich wiederholende Hintergrundbilder bieten viele Möglichkeiten, Ihre E-Mail-Designs zu verbessern, aber es gibt noch mehr:

Kontrastbildtausch

Jetzt, da der Dark Mode in mehreren E-Mail-Clients verfügbar ist – und die Berücksichtigung der Präferenzen der Abonnenten Ihnen hilft, ein breiteres Publikum zu erreichen und Vertrauen aufzubauen – ist der Wechsel Ihres Hintergrundbilds eine großartige Möglichkeit, ein Design im hellen oder dunklen Modus zu ergänzen. Und es ist auch eine lustige und einfache Erweiterung.

Kontrast-Modi

Um dies zu implementieren, müssen Sie den Medienabfragen im Dunkelmodus einige eingebettete CSS hinzufügen. Dadurch wird sichergestellt, dass Ihr Hintergrundbild im Dunkelmodus in E-Mail-Clients bereitgestellt wird, die diese Art von Medienabfrage unterstützen:

.darkmode-switch {
            background-image:url(background-dark.png) !important;
            background-color:#111111 !important;
        }

Es lohnt sich, eine dunkle Fallback-Farbe hinzuzufügen. Dies hilft bei E-Mail-Clients, die keine Bilder laden, ohne dass der Leser eingreift, und stellt sicher, dass Ihre Nachricht gelesen werden kann, wenn Ihr Bild nicht geladen wurde.

Wenden Sie nun in Ihrem HTML-Code Ihre Klasse auf die Zelle an, die Ihr Hintergrundbild für den hellen Modus enthält. Einfach!

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td class= "darkmode-switch" style="background: url(background-light.png) #B5CFE3; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

Beachten Sie : Etwas, das schwer zu entwerfen und noch schwieriger zu codieren ist, sind E-Mail-Clients, die die Farben Ihrer E-Mails in einer Dark Mode-Umgebung umkehren und all die harte Arbeit übersehen, die Sie in das Schreiben von Dark Mode-Medienabfragen stecken.

Es ist fast unmöglich, diese E-Mail-Clients an Bord zu bekommen. Sie können jedoch mit Hintergrundbildern herumspielen, die eine gewisse Transparenz aufweisen, und Ihrem Container eine Hintergrundfarbe mit hohem Kontrast zuweisen, z. B. Weiß für den hellen Modus und Schwarz für den dunklen Modus. Dadurch kann die Hintergrundfarbe invertiert werden. Ich habe es mit dem nächsten Beispiel versucht:

E-Mail-Hintergrundbild in verschiedenen Dark Mode-Szenarien

Mein Chevron-Hintergrundbild hat eine Deckkraft von 30% auf den Pfeilen und ist zwischen ihnen vollständig transparent. Das bedeutet, dass der Inhalt lesbar ist, wenn beleidigende E-Mail-Clients die Kontrolle über mein Rendering im Dark Mode übernehmen.

Weitere Informationen zur Codierung für den Dark Mode und E-Mail-Client-Support finden Sie in unserem Ultimativen Leitfaden für Dark Mode-E-Mail.

Interaktiver Hintergrund

Wie wäre es, Abonnenten mit etwas Interaktivität zu begeistern? Sie können mit einem einfachen Hover- oder Rollover-Effekt ein wenig Freude verbreiten, indem Sie den Hintergrund Ihres Containers ändern, während der Leser seinen Cursor über Ihren Inhalt bewegt.

E-Mail-Hintergrundbild bei Hover oder Rollover wechseln

Sie benötigen ein wenig eingebettetes CSS, damit dies funktioniert. Platzieren Sie dies in Ihrem <style>-Tag:

.background-rollover:hover{ 
        background-image: url(background-rollover-b.png) !important; 
        background-color:#020203 !important;
}

Jetzt müssen Sie diese Klasse nur noch auf Ihre Tabellenzelle anwenden:

<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
    <td class="background-rollover" style="background: url(background-rollover-a.png) #DBE8F0; background-size:cover; background-position:center;">
        <!--add your content here-->
    </td>
</tr>
</table>

Verbessere deine Designs

Mit einer Fülle von Möglichkeiten ist die Verwendung von Hintergrundbildern zur Verbesserung Ihrer E-Mail-Designs eine großartige Möglichkeit, den Umschlag voranzutreiben und Ihre E-Mails von der Masse abzuheben. Um Ihnen bei der Umsetzung dieser Techniken zu helfen, haben wir eine praktische Ressource erstellt, in der Sie den in diesem Beitrag vorgestellten Code abrufen können.

Wir würden gerne sehen, wie Sie Hintergrundbilder in Ihren E-Mails verwenden – teilen Sie Ihre Beispiele in den Kommentaren unten mit.

Stellen Sie sicher, dass Ihre Hintergrundbilder funktionieren – mit Litmus

Hat es funktioniert? Zeigen Sie mit Litmus eine Vorschau Ihrer Hintergrundbilder (und des Rests Ihrer E-Mails) in über 100 E-Mail-Clients, Apps und Geräten an. Und sagen Sie Hallo zu markeneigenen, fehlerfreien E-Mails.

Starten Sie Ihre kostenlose Testversion →

Ursprünglich veröffentlicht am 24. Mai 2019 von Jason Rodriguez. Zuletzt aktualisiert am 21. Juli 2021.