So fügen Sie ein HTML-E-Mail-Hintergrundbild zu Ihrer E-Mail hinzu (mit Code-Beispielen)

Bei E-Mails geht es nicht nur um den Inhalt und dessen Bedeutung für den Empfänger. Es geht auch um das Design und die Emotionen, die es bei Ihrer Zielgruppe hervorruft. Hintergrundbilder in E-Mails sind eine der gängigsten Methoden, um schnell und einfach einen einzigartigen Stil für Ihren Newsletter zu erstellen. In diesem Artikel dreht sich alles um dieses Thema. Wir zeigen Ihnen, wie Sie ein HTML-Hintergrundbild für Ihre E-Mail-Vorlage erstellen, einschließlich aller erforderlichen Code-Elemente. Darüber hinaus erklären wir Ihnen, wie Sie Ihren Erstellungsprozess vereinfachen und mit Stripo Hintergrundbilder ohne Programmierung hinzufügen können.

Was ist ein Hintergrundbild?

Zunächst einmal wollen wir klären, was ein Hintergrundbild eigentlich ist. Im Wesentlichen werden diese Bilder hinter dem Hauptinhalt der E-Mail platziert und dienen als Grundlage, auf der Sie den Rest Ihres E-Mail-Inhalts (Texte, andere Bilder, Banner, Karussells und mehr) anordnen können. Klingt ziemlich einfach, und das ist es auch.

Warum brauchen Sie sie?

Da Hintergrundbilder einfach klingen und in gewisser Weise eine „altmodische” Art der Gestaltung Ihrer E-Mails sind, warum sollten Sie sich dann damit beschäftigen? 

Wir haben drei entscheidende Vorteile, warum Sie bei der Erstellung Ihres eigenen Newsletters die Verwendung von Hintergrundbildern in Betracht ziehen sollten:

• der Hauptvorteil eines Hintergrundbildes besteht darin, dass Sie zusätzliche HTML-Inhalte darüber platzieren können, während in anderen Szenarien dieser Inhaltsbereich mit anderen Inhalten belegt wird (Sie haben beispielsweise die Wahl zwischen einem Hintergrundbild und Text oder nur einem vorgefertigten Bild, auf dem der Text bereits vorhanden ist);
• text über einem Hintergrundbild (im Gegensatz zu einem flachen Bild mit bereits darauf befindlichem Text) kann auch dann gelesen werden, wenn die Bilder deaktiviert sind (einige Empfänger können aufgrund einer begrenzten oder schwachen Internetverbindung die Bildanzeige immer noch deaktivieren);
• die Verwendung von Hintergrundbildern bietet Ihnen mehr Möglichkeiten, einzigartige E-Mails zu gestalten und Ihre Marke hervorzuheben, indem Sie Hintergründe und verschiedene Inhalte darüber kombinieren und aufeinander abstimmen.

Wie Sie sehen, stehen Ihnen eine Reihe solider Vorteile zur Verfügung, mit denen Sie Ihr E-Mail-Design vielfältiger gestalten können, was das Aussehen Ihrer E-Mails angeht.

Was Sie wissen sollten, bevor Sie Hintergrundbilder zu ihrer HTML-E-Mail hinzufügen

Bevor Sie ein  Hintergrundbild in Ihre E-Mail einfügen, sollten Sie sicherstellen, dass es zu Ihrem Design passt. Wenn Sie Hintergrundbilder und Inhalte austauschen und hinzufügen, sehen einige vielleicht gut aus, während andere Ihre Augen zum Schmelzen bringen können. Die Gründe dafür werden wir nun erläutern.

Kontrastverhältnis

Das erste, worüber Sie nachdenken sollten, wenn Sie Ihrer E-Mail ein Hintergrundbild hinzufügen, ist der Kontrast. Der Kontrast im E-Mail-Design ist der Unterschied in Farbe, Größe und anderen visuellen Elementen zwischen verschiedenen Teilen der E-Mail, der eine Hierarchie schafft und die Lesbarkeit verbessert.

Für die allgemeine Lesbarkeit der E-Mail ist es sehr wichtig, dass die Farben Ihres Hintergrundbildes und der darüber liegenden Inhalte aufeinander abgestimmt sind.

Bei der Erstellung eines Hintergrundbildes und der darüber liegenden Inhalte lohnt es sich, die Web Content Accessibility Guidelines (WCAG) zu befolgen. Dabei handelt es sich um eine Reihe international anerkannter technischer Standards, die Websites und digitale Inhalte für Menschen mit Behinderungen zugänglich machen. Wenn Sie Ihr Hintergrundbild und Ihre Inhalte an diese Richtlinien anpassen, kann jeder in Ihrer Zielgruppe Ihre E-Mails lesen.

Um den Designprozess zu vereinfachen, können Sie alle von Ihnen verwendeten Farbkombinationen hier überprüfen.

Gesamterscheinungsbild und Einfachheit

Farben und ihre Kombination sind wichtig, aber vergessen Sie nicht das Gesamtdesign und wie Ihr Hintergrund in Verbindung mit Ihren Inhalten wirkt. Achten Sie immer auf die Gesamtdichte des Hintergrunds. Wenn zu viele Details vorhanden sind, ist der Text selbst bei einer noch so guten Farbauswahl extrem schwer zu lesen. „Je mehr, desto besser“ trifft hier nicht zu.

Fallback-Version

Zu guter Letzt gibt es noch die Fallback-Version. Nicht alle E-Mail-Clients unterstützen Hintergrundbilder, sodass Ihr Hintergrund möglicherweise gar nicht angezeigt wird. Bei der Programmierung müssen Sie daher sicherstellen, dass eine Fallback-Version verfügbar ist, die angezeigt wird, wenn die E-Mail in E-Mail-Clients geöffnet wird, die möglicherweise keine Hintergrundbilder anzeigen. Sie können stattdessen eine Fallback-Farbe für Ihren Hintergrund erstellen.

So programmieren Sie Ihr HTML-E-Mail-Hintergrundbild

Kommen wir nun zum Hauptteil unseres Leitfadens, nämlich der Erstellung Ihres Hintergrundbildes von Grund auf. Wir führen Sie Schritt für Schritt durch den gesamten Prozess und erklären Ihnen alle Feinheiten, die Sie beim Programmieren von Hintergrundbildern in E-Mails beachten sollten. Am Ende dieses Leitfadens erhalten Sie ein Beispiel für eine sehr einfache E-Mail mit einem Hintergrundbild und Text darüber, die wie folgt aussieht:

Wir verwenden ein Code-Beispiel, das Sie später in Ihre eigene E-Mail einfügen können.

Grundlegende HTML-Struktur

Zunächst müssen wir mit einem Hintergrundbild die Grundlage für unsere E-Mail schaffen. Der Code dafür sieht wie folgt aus:

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
</body>
</html>
 

Er besteht aus zwei Hauptteilen, die die Grundlage unseres Bildes mit einem Hintergrundbild bilden. Der erste Teil ist der Abschnitt <style></style>, der den Code für E-Mail-Stile und unser Hintergrundbild enthält. Der zweite Teil ist <body></body>, wo wir unseren Inhalt platzieren müssen, der über dem E-Mail-Hintergrundbild angezeigt wird.

Hinzufügen einer Tabellenstruktur für Kompatibilität

Der nächste Schritt ist das Hinzufügen einer Tabellenzelle für unsere E-Mail. Da viele E-Mail-Clients (insbesondere ältere) für das Layout auf Tabellen angewiesen sind, verwenden wir eine Tabellenstruktur, um sicherzustellen, dass die E-Mail auf allen Geräten gut dargestellt wird.

Kopieren Sie diesen Code und fügen Sie ihn in den Teil <body></body> ein.

<table role="presentation" width="100%" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <table role="presentation" width="600" cellspacing="0" cellpadding="0" align="center">
                <!-- Email content will go here -->
            </table>
        </td>
    </tr>
</table>
 

Wir platzieren diesen Code-Teil hier, da der Abschnitt <body> sichtbare Inhalte enthält, die in der E-Mail gerendert werden. Dieser Code enthält zwei Tabellen, im Wesentlichen eine äußere und eine innere:

• die äußere Tabelle mit der Breite= „100 %“ stellt sicher, dass sich das Layout an verschiedene Bildschirmgrößen anpassen kann;
• die innere Tabelle mit einer Breite von „600” enthält den eigentlichen E-Mail-Inhalt und ist zentriert, um ein klares, professionelles Erscheinungsbild zu erzielen, das auf verschiedenen Geräten und in verschiedenen E-Mail-Clients funktioniert.

Erstellen einer Grundlage für das Hintergrundbild

Nachdem wir uns mit der Tabellenstruktur befasst haben, müssen wir einen „Wrapper” für unser zukünftiges Hintergrundbild erstellen. Im Wesentlichen erstellen wir innerhalb der inneren Tabelle ein div-Element, das Hintergrundbild enthält. Dies ist ein wichtiger Schritt, da wir einen speziellen Container für unser Hintergrundbild erstellen und eine klare Trennung zwischen dem Inhalt und unserem Hintergrundbild vornehmen.

Außerdem können wir mit dem später hinzugefügten Styles-Code das Aussehen von Inhalt und Hintergrund separat ändern, was für umfassendere E-Mail-Design-Funktionen von entscheidender Bedeutung ist.

Nehmen Sie diesen Code:

<td class="email-body">
    <div class="content">
        <h1>Background Image and Text</h1>
        <p>You can place your own background and content here.</p>
    </div>
</td>
 

Und fügen Sie ihn hier ein:

Als Ergebnis haben wir oben einen einfachen Text als grundlegenden Inhalt erstellt, der über unserem Hintergrundbild angezeigt wird.

Hinzufügen des CSS-Codes für das Hintergrundbild

Kommen wir nun zum wichtigsten Teil, nämlich dazu, das Hintergrundbild so anzuzeigen, wie es sein soll. Innerhalb des <style>-Tags im <head> fügen wir CSS für die Klasse .email-body hinzu, um das Hintergrundbild einzurichten und sicherzustellen, dass es in verschiedenen E-Mail-Clients gut aussieht.

Um ihr Hintergrundbild zum Leben zu erwecken, ersetzen Sie <style></style> zum Leben zu erwecken, ersetzen Sie:

<style>
    body {
        margin: 0;
        padding: 0;
    }
    .email-body {
        background-image: url('https://img.freepik.com/premium-photo/multi-color-paper-texture-background_8493-4031.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 100%;
        display: block;
    }
    .content {
        padding: 20px;
        color: white;  /* Change text color to ensure readability */
        font-family: Arial, sans-serif;
    }
</style>
 

Unser Hintergrundbild wird über einen URL-Link in die E-Mail eingefügt, den Sie hier ersetzen können.

Mit diesem Code haben Sie mehrere Optionen, mit denen Sie das Aussehen Ihres Hintergrundbildes und der darüber liegenden Inhalte ändern können. Lassen Sie uns jede einzelne Option besprechen, damit Sie besser verstehen, was Sie hier tatsächlich ändern können:

• margin: 0 entfernt alle Standardränder um den Textkörper des Dokuments. Standardmäßig wenden Browser oft einen kleinen Rand um die Seitenränder an. Durch die Einstellung auf 0 wird sichergestellt, dass an den Außenrändern der E-Mail keine unerwünschten Abstände entstehen;
• padding: 0 ist dem vorherigen sehr ähnlich, entfernt jedoch jeglichen Standard-Abstand innerhalb des Hauptteils. Der Abstand ist der Raum zwischen dem Inhalt und dem Rand eines Elements. Wenn Sie ihn auf 0 setzen, wird sichergestellt, dass der Inhalt ohne zusätzlichen Abstand am äußersten Rand des Hauptteils beginnt;
• background-image ist hier ein wichtiger Faktor und definiert das Hintergrundbild für das Element;
• background-repeat: no-repeat verhindert, dass sich das Bild wiederholt, und stellt sicher, dass es nur einmal angezeigt wird, auch wenn es nicht den gesamten Bereich ausfüllt;
• background-size: cover steuert, wie das Hintergrundbild skaliert wird, und cover sorgt dafür, dass das Bild den gesamten Bereich des Elements abdeckt, auch wenn dies bedeutet, dass es möglicherweise beschnitten wird (einfach ausgedrückt: Es behält sein Seitenverhältnis bei, während es den Bereich ausfüllt, und verhindert so Lücken);
• background-position: center ist erforderlich, um da Hintergrundbild innerhalb des Elements zu zentrieren;
• width: 100% legt die Breite des Elements .email-body fest und stellt sicher, dass das Hintergrundbild die gesamte Breite der E-Mail ausfüllt;
• height: 100% legt die Höhe des Elements .email-body auf 100 % seines übergeordneten Containers fest, sodass das Element den verfügbaren vertikalen Raum ausfüllt;
• padding: 20px erstellt einen Abstand von 20px auf allen Seiten zwischen dem Inhalt und den Rändern des .content-Containers;
• color: white ändert die Textfarbe innerhalb des Elements .content zu Weiß. Dies ist besonders wichtig, wenn ein Hintergrundbild vorhanden ist, das dunkel sein könnte, um sicherzustellen, dass der Text lesbar ist und deutlich hervorsticht;
• font-family: Arial, sans-serif legt die Schriftart für den Text auf Arial fest.

Hinzufügen eines Fallback-Teils

Nun vervollständigen wir unseren Hintergrundbild-Code mit der wichtigen Information, dass E-Mail-Clients keine Bilder laden können, die im Hintergrund der E-Mail festgelegt sind.

Kopieren Sie diesen Code und fügen Sie ihn zwischen </style> und </head> ein:

<!--[if mso]>
    <style>
        .email-body {
            background: #f0f0f0; /* Fallback color for Outlook */
        }
    </style>
    <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="true">
        <v:fill src="https://img.freepik.com/premium-photo/multi-color-paper-texture-background_8493-4031.jpg" />
    </v:background>
<![endif]-->
 

Der Fallback-Code ist hier relativ einfach, aber lassen Sie uns kurz besprechen, was er bewirkt:

• background: #f0f0f0 ist Ihre Fallback-Hintergrundfarbe, die Sie in die von Ihnen benötigte einfarbige Fallback-Farbe ändern können;
• <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="true"> ist ein VML-Element (Vector Markup Language), das von Outlook zum Rendern von Hintergrundbildern verwendet wird;
• <v:fill src="https://img.freepik.com/premium-photo/multi-color-paper-texture-background_8493-4031.jpg" /> definiert die Hintergrundbild, die in Outlook verwendet werden sollen. Wenn Sie diese ändern möchten, ersetzen Sie einfach den Link durch Ihr eigenes Bild;
• <!--[if mso]> ... <![endif]--> ist ein spezieller Block für Outlook, der sicherstellt, dass Outlook das Hintergrundbild mit VML rendern kann, während andere E-Mail-Clients diesen Teil ignorieren.

Vollständiger Code

Das war's auch schon. Der Code für Ihr Hintergrundbild in E-Mails ist fertig. Wir hinterlassen Ihnen ein vollständiges Codebeispiel, damit Sie überprüfen können, ob Sie bei der Durchführung unserer Anleitung alles richtig gemacht haben.

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .email-body {
            background-image: url('https://img.freepik.com/premium-photo/multi-color-paper-texture-background_8493-4031.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            width: 100%;
            height: 100%;
            display: block;
        }
        .content {
            padding: 20px;
            color: white;  /* Change text color to ensure readability */
            font-family: Arial, sans-serif;
        }
    </style>
    <!-- Outlook background image fallback -->
    <!--[if mso]>
        <style>
            .email-body {
                background: #f0f0f0; /* Fallback color for Outlook */
            }
        </style>
        <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="true">
            <v:fill src="https://img.freepik.com/premium-photo/multi-color-paper-texture-background_8493-4031.jpg" type="tile" />
        </v:background>
    <![endif]-->
</head>
<body>
    <table role="presentation" width="100%" cellspacing="0" cellpadding="0">
        <tr>
            <td>
                <table role="presentation" width="600" cellspacing="0" cellpadding="0" align="center">
                    <tr>
                        <td class="email-body">
                            <div class="content">
                                <h1>Background Image and Text</h1>
                                <p>You can place your own background and content here.</p>
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>
 

So fügen Sie in Stripo ein Hintergrundbild zu Ihrer E-Mail hinzu

Es ist toll, wenn Sie genau wissen, wie der Code für Ihr E-Mail-Hintergrundbild funktioniert. Aber was, wenn Sie keine Zeit haben, sich damit auseinanderzusetzen, oder gar keine Erfahrung mit dem Code haben? Hier kommt Stripo ins Spiel. Hier finden Sie eine kurze Anleitung, wie Sie in unserem Editor ein Hintergrundbild hinzufügen können, ohne eine einzige Zeile Code zu schreiben.

Wir zeigen Ihnen anhand unserer standardmäßigen E-Mail-Grundstruktur, die wie folgt aussieht, wie alles funktioniert:

Öffnen Sie die Stileinstellungen

Klicken Sie auf die Struktur, in die Sie Ihr Hintergrundbild einfügen möchten, und klicken Sie dann auf die Registerkarte „Stile“.

Aktivieren Sie die Option „Hintergrundbild“

Um mit der Einrichtung Ihres Hintergrundbildes zu beginnen, klicken Sie auf den gleichnamigen Schalter.

Wählen Sie eine Methode zum Hinzufügen Ihres Hintergrundbildes

Sobald Sie auf den Schalter für Hintergrundbilder klicken, wird ein Fenster mit mehreren Optionen zum Hinzufügen eines Bildes angezeigt. Lassen Sie uns kurz auf jede einzelne eingehen:

• sie können ein Bild von Ihrem Gerät hinzufügen, indem Sie auf das Hauptfeld zum Hinzufügen von Bildern klicken oder die URL dieses Bildes dort einfügen;
• die Registerkarten „E-Mail” und „Projekt” zeigen Bilder aus Ihren Galerien, die mit E-Mails oder dem gesamten Projekt verknüpft sind (in unserem Beispiel haben wir eine leere E-Mail und ein leeres Projekt, sodass wir hier keine Bildoptionen sehen);
• „Jahreszeiten“ und „Dekorationen“ enthalten Elemente, die von unserem Designteam erstellt wurden und aus denen Sie auswählen (in verschiedenen Kategorien suchen) und als Hintergrundbild festlegen können;
• „AI-Bild“ öffnet ein separates Fenster, in dem Sie mit KI Ihr eigenes Bild erstellen können (mehr dazu später);
• „Stockfotos“, „Icons“ und „GIFs“ ermöglichen es Ihnen, aus einer Vielzahl von kostenlosen Bildern, Symbolen und GIFs aus verschiedenen Quellen auszuwählen, ohne den Editor zu verlassen.

Trotz aller Optionen verwenden wir das Bild aus unserem Code-Leitfaden, um die Konsistenz zu wahren, damit Sie sehen können, dass es keine visuellen Unterschiede zwischen der manuellen Codierung und unserem Editor gibt.

Passen Sie Ihr E-Mail-Hintergrundbild an

Wir haben also unser Hintergrundbild zur Struktur hinzugefügt, und im Moment sieht es so aus:

Das ist völlig in Ordnung, da unser Editor den leeren Container über dem Hintergrundbild anzeigt und damit kennzeichnet, dass Sie etwas über Ihren Hintergrund hinzufügen können. Aber lassen Sie uns nun die Gestaltungsmöglichkeiten durchgehen, die Sie auf Ihr Hintergrundbild anwenden können:

• mit „Hintergrundbild wiederholen“ können Sie die Hintergrundwiederholung aktivieren;
• mit „Horizontale und vertikale Position“ können Sie die genaue Position Ihres Hintergrundbildes innerhalb des Elements festlegen;
• mit „Hintergrundbreite und -höhe“ können Sie die genaue Hintergrundgröße des Hintergrundbildes festlegen oder Voreinstellungen wie „Auto“, „Cover“ oder „Contain“ verwenden;
• mit „Rahmen“ haben Sie die Möglichkeit, einen Rahmen um Ihr Hintergrundbild zu erstellen und festzulegen, ob es einen vollständigen Rahmen oder nur einen Rahmen pro Seite haben soll;
• mit der Option „Radius“ können Sie den Radius für Ihr Hintergrundbild festlegen, indem Sie die Option „Radius“ für alle Ecken gleichzeitig oder für jede Ecke separat auswählen.

Fügen Sie den erforderlichen Inhalt hinzu

Der letzte Schritt bei der Arbeit mit Hintergrundbildern in E-Mails ist das Hinzufügen von Inhalt darüber. Um unser Beispiel aus dem Programmierhandbuch zu replizieren, fügen wir zwei Textblöcke in denselben Container ein.

Danach fügen wir denselben Text aus dem Codierungsbeispiel hinzu.

Danach legen wir den Absatzstil für den ersten Textblock auf H1 fest:

Als letzten Schliff haben wir die oberen und unteren Abstände so eingestellt, dass es genauso aussieht wie unser erstes Codierungsbeispiel.

Voilà, Sie haben nun Ihr Hintergrundbild und den Text darüber, ohne den Code manuell erstellen zu müssen.

Erstellen von Hintergrundbildern mit GenAI

Wir haben Ihnen versprochen, Ihnen mehr über unsere KI-Bildgenerierung zu erzählen, also lassen Sie uns beginnen. Mit den GenAI-Funktionen können Sie jedes beliebige Hintergrundbild für einen Abschnitt erstellen, ohne den Editor verlassen zu müssen.

Gehen wir in unserer Anleitung ein paar Schritte zurück und klicken Sie auf die Registerkarte „KI-Bild“, wenn Sie ein Bild zu Ihrem Hintergrund hinzufügen.

Das Erstellen von Bildern mit GenAI ist ganz einfach. Sie müssen lediglich Folgendes tun:

• eine Eingabeaufforderung schreiben, um die Kreativität von GenAI nach Ihren Wünschen zu steuern;
• ein KI-Modell auswählen (jedes Modell generiert Bilder in unterschiedlichen Stilen, Qualitäten und Geschwindigkeiten);
• den gewünschten Stil Ihres Bildes festlegen;
• das Seitenverhältnis festlegen;
• auf die Schaltfläche „Generieren“ klicken.

Nach dem Klicken erhalten Sie mehrere generierte Bilder, die Sie durch Anklicken des gewünschten Bildes als Hintergrund festlegen können. Wenn Ihnen die Ergebnisse nicht gefallen, können Sie jederzeit Ihre Eingabeaufforderung, das KI-Modell oder andere Optionen anpassen und das Bild neu generieren.

Sobald das Bild hinzugefügt wurde, können Sie die gleichen Stileinstellungen wie zuvor beschrieben anwenden.

Zusammenfassung

Wie Sie sehen, ist das Erstellen von Hintergrundbildern in E-Mails gar nicht so schwer. Die Code-Beispiele sind nicht allzu kompliziert und es gibt nicht allzu viele davon, sodass Sie nicht viel Zeit benötigen, um Ihr eigenes Hintergrundbild zu erstellen. Mit unserem Editor geht es jedoch noch schneller und einfacher, und Sie erhalten ohne großen Aufwand das gleiche Ergebnis.