So fügen Sie ein Hintergrundbild in WordPress hinzu (6 einfache Wege)

Hintergrundbilder können das Aussehen und Gefühl Ihrer WordPress-Website komplett verändern. Aber gestreckte Bilder, falsche Ausrichtung oder Probleme mit der Dateigröße können im Weg stehen. Besonders wenn Sie nicht sicher sind, welche Methode Sie verwenden sollen.

Aus unserer Erfahrung mit der Verwaltung Dutzender von WordPress-Websites haben wir gelernt, dass die meisten Leute diesen Prozess viel schwieriger gestalten, als er sein muss.

Die gute Nachricht ist, dass WordPress mehrere integrierte Optionen zum Hinzufügen von Hintergrundbildern bietet und es ausgezeichnete Plugins gibt, die dies noch einfacher machen. Sobald Sie die richtigen Methoden kennen, können Sie mit nur wenigen Klicks schöne Hintergründe zu Ihrer gesamten Website, einzelnen Seiten oder bestimmten Abschnitten hinzufügen.

In diesem Leitfaden zeigen wir Ihnen 5 zuverlässige Möglichkeiten, Hintergrundbilder in WordPress hinzuzufügen, die für jedes Fähigkeitsniveau funktionieren. 🎨

Warum ein WordPress-Hintergrundbild hinzufügen?

Das Hinzufügen eines Bildes zu Ihrer WordPress-Website kann sie für Besucher attraktiver machen. Sie können schnell die Aufmerksamkeit der Benutzer auf sich ziehen und sie mit Ihren Inhalten fesseln.

Es ermöglicht Ihnen auch, das Design Ihrer Website an Ihre Marke anzupassen. Sie können beispielsweise dezente Fotos Ihrer Produkte oder Ihres Markenmaskottchens im Hintergrund hochladen.

Zusätzlich können Sie ein YouTube-Video als Vollbildhintergrund oder eine Bildershow hinzufügen, die Ihre Inhalte zum Leben erweckt.

Wir empfehlen jedoch, Hintergrundbilder auszuwählen, die nicht ablenken oder das Lesen des Inhalts auf Ihrem WordPress-Blog erschweren. Ein Hintergrund sollte das Benutzererlebnis verbessern und Ihre Botschaft an die Besucher vermitteln.

Außerdem ist es wichtig, ein Hintergrundbild zu wählen, das mobilfreundlich ist und die Geschwindigkeit Ihrer Website nicht beeinträchtigt. Andernfalls wirkt es sich negativ auf Ihr WordPress SEO aus.

In diesem Artikel teilen wir verschiedene Möglichkeiten, wie Sie ein WordPress-Hintergrundbild hinzufügen können.

Wir werden mehrere Methoden behandeln, darunter den WordPress Theme Customizer, den Full Site Editor, Plugins, Theme Builder und mehr. Klicken Sie einfach auf den Link unten, um zu Ihrem bevorzugten Abschnitt zu springen:

• Methode 1. Hintergrundbild über den WordPress Theme Customizer hinzufügen
• Methode 2. Benutzerdefiniertes Hintergrundbild mit dem Full Site Editor hinzufügen
• Methode 3. Hintergrundbild mit dem WordPress Theme Builder hinzufügen
• Methode 4. Hintergrundbild mit CSS Hero hinzufügen
• Methode 5. Benutzerdefinierte Hintergrundbilder überall in WordPress mit CSS-Code hinzufügen
• Bonus-Ressourcen: Anleitungen für Bild- und Mediendateien zur Verbesserung der WordPress-Website-UX

Bereit? Legen wir los.

Methode 1. Hintergrundbild über den WordPress Theme Customizer hinzufügen

Die meisten beliebten WordPress-Themes bieten Unterstützung für benutzerdefinierte Hintergründe. Mit dieser Funktion können Sie ganz einfach ein Hintergrundbild festlegen. Wir empfehlen diese Methode, wenn Ihr Theme sie unterstützt.

Wenn Ihre Option für das Customizer-Menü fehlt, dann hat Ihr Theme möglicherweise die vollständige Website-Bearbeitung aktiviert. Im nächsten Abschnitt erfahren Sie, wie Sie den vollständigen Website-Editor verwenden, um Ihr Hintergrundbild zu ändern.

Um den 'Customizer' zu verwenden, müssen Sie in Ihrem WordPress-Adminbereich zu Darstellung » Anpassen navigieren.

Dies startet den WordPress Theme Customizer, mit dem Sie verschiedene Theme-Einstellungen ändern können, während Sie eine Live-Vorschau Ihrer Website sehen.

Beachten Sie, dass die angezeigten Optionen je nach WordPress-Theme, das Sie verwenden, variieren. In diesem Tutorial verwenden wir das Sydney-Theme.

Wenn Sie ein anderes Theme verwenden, müssen Sie möglicherweise die Dokumentation dieses Themes nachschlagen. Wenn Sie im Customizer kein Hintergrundbild finden, können Sie sich auch an den Theme-Entwickler wenden, um herauszufinden, wie Sie eines hinzufügen können.

In den Customizer-Optionen des Sydney-Themes müssen Sie im linken Bereich auf 'Allgemein' klicken.

Sobald Sie dies getan haben, sehen Sie verschiedene 'Allgemeine' Optionen, um Ihr Sydney-Theme anzupassen.

An diesem Punkt müssen Sie auf den Abschnitt „Hintergrundbild“ klicken.

Auf dem nächsten Bildschirm sehen Sie die Option, Ihr Hintergrundbild hinzuzufügen.

Klicken Sie auf die Schaltfläche „Bild auswählen“.

Dies öffnet die WordPress-Mediathek.

Hier können Sie ein Bild von Ihrem Computer hochladen oder eines auswählen, das Sie zuvor hochgeladen haben.

Nachdem Sie das Bild für Ihren Hintergrund ausgewählt haben, müssen Sie auf die Schaltfläche 'Auswählen' klicken.

Dies schließt das Medien-Popup, und Sie sehen eine Vorschau Ihres ausgewählten Hintergrundbildes im Theme-Customizer.

Im linken Bereich können Sie die Position des Bildes (oben, Mitte, unten, links, rechts) anpassen, um zu steuern, wie es im Hintergrund erscheint. Sie können es auch mit dem Dropdown-Menü „Bildgröße“ Dropdown-Menü anpassen, um den Bereich zu füllen oder abzudecken.

Wenn das Bild den Hintergrund wiederholen soll, aktivieren Sie das Kontrollkästchen 'Hintergrundbild wiederholen'. Sie können das Bild auch mit der Seite scrollen lassen, indem Sie das Kontrollkästchen 'Mit Seite scrollen' aktivieren.

Wenn Sie mit dem Ergebnis zufrieden sind, klicken Sie auf die Schaltfläche „Veröffentlichen“ oben, um Ihre Einstellungen zu speichern.

Das ist alles. Sie haben erfolgreich ein Hintergrundbild zu Ihrer WordPress-Website hinzugefügt. Besuchen Sie Ihre Website, um es in Aktion zu sehen.

Methode 2. Benutzerdefiniertes Hintergrundbild mit dem Full Site Editor hinzufügen

Wenn Sie ein blockbasiertes WordPress-Theme verwenden, können Sie ein benutzerdefiniertes Hintergrundbild über den Full Site Editor (FSE) hinzufügen.

Der Full Site Editor ermöglicht es Ihnen, das Design Ihrer Website mit Blöcken zu bearbeiten. Es ist genau wie das Bearbeiten eines Blogbeitrags oder einer Seite mit dem WordPress Block Editor.

Für dieses Tutorial verwenden wir das Standard-Theme „Twenty Twenty-Two“. Um den vollständigen Website-Editor zu starten, gehen Sie einfach im WordPress-Adminbereich zu Darstellung » Editor.

Sobald Sie sich im Full Site Editor befinden, müssen Sie einen „Cover“-Block zu Ihrer Vorlage hinzufügen, um ein Hintergrundbild hochzuladen.

Klicken Sie einfach auf das '+'-Zeichen oben und fügen Sie einen 'Cover'-Block hinzu.

Um ein Hintergrundbild zum Block „Cover“ hinzuzufügen, klicken Sie auf die Schaltfläche „Hochladen“ oder „Mediathek“.

Dies öffnet das WordPress-Medien-Uploader-Popup.

Der nächste Schritt ist die Auswahl eines Bildes, das Sie als Website-Hintergrund verwenden möchten.

Wenn Sie das Bild ausgewählt haben, klicken Sie einfach auf die Schaltfläche 'Auswählen'.

Sobald das Bild zum Block „Cover“ hinzugefügt wurde, müssen Sie es als Hintergrund der Seite festlegen.

Klicken Sie dazu einfach oben auf das Symbol „Listenansicht“ (Symbol mit 3 Strichen). Dies öffnet eine Gliederungsansicht der Theme-Elemente, wie z. B. den Website-Header und die Fußzeile.

Ziehen Sie anschließend einfach alle Vorlagenelemente per Drag & Drop unter den Block „Cover“ in der Listenansicht.

Sobald sie alle darunter sind, wird das Bild des „Cover“-Blocks als Hintergrund der Website angezeigt.

Danach können Sie das Hintergrundbild anpassen, indem Sie auf den 'Cover'-Block klicken und das Zahnradsymbol in der oberen rechten Ecke des Bildschirms auswählen. Dies öffnet das Einstellungsfenster 'Block'.

Hier finden Sie Optionen, um das Bild zu einem festen Hintergrund zu machen, dessen Überlagerung anzupassen, die Farbe zu bearbeiten und mehr.

Wenn Sie fertig sind, vergessen Sie nicht, auf die Schaltfläche „Speichern“ zu klicken.

Und das ist alles! Sie haben erfolgreich ein Hintergrundbild mit dem Full Site Editor hinzugefügt.

Methode 3. Hintergrundbild mit dem WordPress Theme Builder hinzufügen

Eine weitere Möglichkeit, benutzerdefinierte Hintergrundbilder zu Ihrer Website hinzuzufügen, ist die Verwendung eines WordPress-Theme-Builders wie SeedProd. Es ist das beste WordPress Landing Page Plugin mit Drag-and-Drop-Funktionalität, mit dem Sie das Design Ihrer Website einfach anpassen können, ohne eine einzige Zeile Code anfassen zu müssen.

Wir verwenden SeedProd auch auf einigen unserer Marken-Websites, und es funktioniert wirklich gut. Weitere Details zu unseren Erfahrungen finden Sie in unserem ausführlichen SeedProd-Testbericht.

Für dieses Tutorial verwenden wir die SeedProd Pro-Version, da sie den Theme Builder enthält. Es gibt auch eine kostenlose SeedProd Lite-Version, die Sie kostenlos ausprobieren können.

Zuerst müssen Sie das SeedProd-Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unseren Leitfaden zur Installation eines WordPress-Plugins.

Nach der Aktivierung sehen Sie den SeedProd-Begrüßungsbildschirm in Ihrem WordPress-Dashboard.

Als Nächstes geben Sie Ihren Lizenzschlüssel ein und klicken auf die Schaltfläche „Schlüssel überprüfen“, um die Pro-Version des Plugins zu aktivieren. Sie finden Ihren Lizenzschlüssel in Ihrem SeedProd-Konto.

Sobald alles eingestellt ist, müssen Sie zu SeedProd » Theme Builder in Ihrem WordPress-Adminbereich navigieren.

Klicken Sie oben auf die Schaltfläche „Themes“.

SeedProd bietet nun mehrere Theme-Vorlagen zur Auswahl.

Sie können mit der Maus über eine beliebige Vorlage fahren und darauf klicken, die Sie verwenden möchten. Für dieses Tutorial verwenden wir die Vorlage des Designs „Starter“.

Von hier aus generiert SeedProd verschiedene Vorlagen wie die Homepage, einzelne Beiträge, einzelne Seiten, Seitenleiste, Kopfzeile und mehr.

Um ein Hintergrundbild hinzuzufügen, das auf der gesamten Website und auf allen Theme-Vorlagen angezeigt wird, klicken Sie auf die Option 'Design bearbeiten' unter Global CSS.

Auf dem nächsten Bildschirm sehen Sie globale CSS-Einstellungen, die Sie ändern können.

Klicken Sie einfach auf die Option „Hintergrund“, um mit der Anpassung zu beginnen.

Danach sehen Sie die Optionen für das „Hintergrundbild“.

Klicken Sie auf „Eigenes Bild verwenden“, um Ihr Bild hochzuladen. Alternativ können Sie auf die Schaltfläche „Stockbild verwenden“ klicken, um nach einem Stockbild zu suchen, das Sie als Hintergrund Ihrer Website verwenden möchten.

Sobald Sie ein Hintergrundbild hinzugefügt haben, zeigt der SeedProd-Builder eine Live-Vorschau an.

Sie können die Hintergrundposition bei Bedarf anpassen. Sie können auch wählen, ob Sie den Vollbildmodus verwenden oder ihn wiederholen möchten, unter anderem.

Außerdem können Sie die Dunkelheit Ihres Hintergrundbildes anpassen, indem Sie den Schieberegler 'Hintergrund abdunkeln' bewegen. Je höher der Wert, desto dunkler wird das Bild.

Wenn Sie mit der Bearbeitung des Hintergrundbildes fertig sind, klicken Sie einfach oben auf die Schaltfläche „Speichern“ und schließen Sie die globalen CSS-Einstellungen.

Wenn Sie ein benutzerdefiniertes Hintergrundbild für verschiedene Teile Ihrer Website hinzufügen möchten, können Sie diese einzelnen Theme-Vorlagen in SeedProd bearbeiten. Weitere Details finden Sie in unserem Leitfaden zur einfachen Erstellung eines benutzerdefinierten WordPress-Themes.

Methode 4. Hintergrundbild mit CSS Hero hinzufügen

CSS Hero ist ein WordPress-Plugin, mit dem Sie Änderungen an Ihrem Theme vornehmen können, ohne programmieren zu müssen.

Sie können Hintergrundbilder schnell in wenigen einfachen Schritten hinzufügen. Zuerst müssen Sie jedoch CSS Hero installieren und aktivieren. Weitere Details finden Sie in unserem Leitfaden zur Installation eines WordPress-Plugins.

Sobald Sie das getan haben, können Sie mit der Anpassung Ihrer Website beginnen.

Das erste, was Sie tun müssen, ist, Ihre Homepage in Ihrem Browser zu öffnen. Dort sehen Sie den Link 'Mit CSS Hero anpassen' in Ihrer Admin-Leiste.

Klicken Sie einfach auf den Link und Sie sehen, wie sich die CSS Hero-Optionen öffnen.

Sobald Sie drin sind, müssen Sie mit der Maus über den Bereich fahren, zu dem Sie ein Bild hinzufügen möchten. Klicken Sie dann auf den Bereich, um die Option „Hintergrund“ in der linken Seitenleiste aufzurufen.

Klicken Sie auf 'Hintergrund', um die Einstellungen zum Hinzufügen eines Bildes anzuzeigen.

Klicken Sie von dort einfach auf 'Bild'.

Dann können Sie ein Bild von Unsplash auswählen oder Ihr eigenes hochladen, um Ihren Hintergrund zu erstellen.

Wenn Sie auf das gewünschte Bild klicken, sehen Sie die Schaltfläche „Bild anwenden“.

Dann möchten Sie vielleicht wählen, welche Größe Ihr Bild haben soll. Wir empfehlen, die große Version zu wählen, damit sie sich über die gesamte Seite erstreckt.

Schließlich können Sie unten auf „Speichern und Veröffentlichen“ klicken, um das Hintergrundbild für Ihre Website zu speichern.

Methode 5. Benutzerdefinierte Hintergrundbilder überall in WordPress mit CSS-Code hinzufügen

Standardmäßig fügt WordPress verschiedene CSS-Klassen zu verschiedenen HTML-Elementen auf Ihrer WordPress-Website hinzu. Sie können also ganz einfach benutzerdefinierte Hintergrundbilder zu einzelnen Beiträgen, Kategorien, Autoren und anderen Seiten hinzufügen, indem Sie diese von WordPress generierten CSS-Klassen verwenden.

Wenn Sie beispielsweise eine Kategorie auf Ihrer Website namens TV haben, fügt WordPress automatisch diese CSS-Klassen zum Body-Tag hinzu, wenn jemand die TV-Kategorieseite aufruft.

<body class="archive category category-tv category-4">

Sie können das Inspect Tool verwenden, um zu sehen, welche CSS-Klassen WordPress dem Body-Tag hinzufügt. Hier ist ein Beispiel:

Sie können entweder die CSS-Klasse category-tv oder category-4 verwenden, um nur diese Kategorie-Seite anders zu gestalten.

Fügen wir zum Beispiel ein benutzerdefiniertes Hintergrundbild zur Kategorie-Archivseite hinzu.

Obwohl es üblich ist, die Datei functions.php eines Themes zu ändern, um CSS-Code hinzuzufügen, ist dies unsicher und nicht sehr anfängerfreundlich. Ein kleiner Fehler und Sie riskieren, Ihre Website zu beschädigen.

Deshalb empfehlen wir immer, stattdessen WPCode zu verwenden. Es ist das beste Plugin, um benutzerdefinierte Code-Snippets ohne viel Aufwand hinzuzufügen.

Wir verwenden WPCode, um Code-Snippets über unsere Marken hinweg hinzuzufügen und zu verwalten. Es war eine einfache und effektive Möglichkeit, organisiert zu bleiben und die Dinge reibungslos laufen zu lassen. Wenn Sie mehr erfahren möchten, lesen Sie unsere detaillierte WPCode-Bewertung.

Um dies zu tun, installieren und aktivieren wir das WPCode Plugin. Wenn Sie Hilfe benötigen, können Sie unseren Leitfaden zur Installation eines WordPress-Plugins konsultieren.

Nach der Aktivierung navigieren Sie einfach von Ihrem WordPress-Adminbereich aus zu Code-Snippets » + Neu hinzufügen .

Auf dem nächsten Bildschirm möchten Sie mit der Maus über die Option „Benutzerdefinierten Code hinzufügen (Neuer Snippet)“ fahren und auf die Schaltfläche „Snippet verwenden“ klicken, sobald sie erscheint.

Auf dem nächsten Bildschirm können Sie mit dem Hinzufügen eines Titels für Ihren benutzerdefinierten CSS-Snippet beginnen. Sie sollten etwas Einfaches und Relevantes wählen, da dies Ihnen hilft, den Code später wiederzuerkennen.

Danach können Sie das folgende benutzerdefinierte CSS in das Feld „Code-Vorschau“ eingeben oder einfügen.

body.category-tv {
background-image: url("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

Vergessen Sie nicht, die URL des Hintergrundbilds und die Kategorieklasse durch die Ihres eigenen Standorts zu ersetzen.

So könnte es im WPCode-Editor aussehen:

Sie müssen dann den 'Code-Typ' festlegen, indem Sie 'CSS-Snippet' aus dem Dropdown-Menü auswählen.

Wenn alles gut aussieht, können Sie den Schalter umlegen, um den Code-Snippet zu aktivieren, und auf „Snippet speichern“ klicken.

Zusätzlich können Sie einzelnen Beiträgen und Seiten benutzerdefinierte Hintergründe hinzufügen.

WordPress hat eine CSS-Klasse mit der Beitrags- oder Seiten-ID im Body-Tag. Sie können denselben CSS-Code verwenden und einfach .category-tv durch die beitragspezifische CSS-Klasse ersetzen.

Weitere Details finden Sie in unserem Tutorial zum Hinzufügen von benutzerdefiniertem CSS in WordPress.

Bonus-Ressourcen: Anleitungen für Bild- und Mediendateien zur Verbesserung der WordPress-Website-UX

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie ein Hintergrundbild in WordPress hinzufügen. Möglicherweise möchten Sie auch unseren Leitfaden zu folgenden Themen lesen:

• So fügen Sie Bilder in WordPress richtig hinzu
• So erstellen Sie eine Bildergalerie in WordPress
• So erstellen Sie einen Video- und Bild-WordPress-Slider
• So fügen Sie Miniaturansichten zu Links für vorherige und nächste Beiträge in WordPress hinzu
• So betten Sie Spotify in WordPress ein
• So betten Sie Apple Podcasts in WordPress ein
• Die beste Software für Webdesign
• Wie man Bilder für Web-Performance optimiert, ohne Qualität zu verlieren

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.