Wie man ein Hintergrundbild in WordPress einfügt (6 einfache Wege)

Möchten Sie ein Hintergrundbild zu Ihrer WordPress-Website hinzufügen?

Hintergrundbilder können Ihre Website ansprechender und lebendiger wirken lassen.

In diesem Artikel zeigen wir Ihnen, wie Sie Ihrer WordPress-Website ganz einfach ein Hintergrundbild hinzufügen können.

Warum ein WordPress-Hintergrundbild hinzufügen?

Hinzufügen eines Bildes zu IhremWordPress-Website kann sie für Besucher attraktiver machen. Sie können die Aufmerksamkeit der Nutzer schnell erregen und sie für Ihre Inhalte begeistern.

Außerdem können Sie das Design Ihrer Website entsprechend Ihrer Marke personalisieren. Sie können zum Beispiel dezente Fotos Ihrer Produkte oder Ihres Markenmaskottchens im Hintergrund hochladen.

Zusätzlich können Sie auchein YouTube-Video als vollständigen Hintergrund hinzufügen oder eine Bild-Diashow, die Ihren Inhalt zum Leben erweckt.

Wir empfehlen jedoch, Hintergrundbilder zu wählen, die nicht ablenken oder das Lesen des Inhalts auf Ihrer Website erschweren.WordPress-Blog. Ein Hintergrund sollte das Nutzererlebnis verbessern und dazu beitragen, dass Ihre Botschaft bei den Besuchern ankommt.

Es ist auch wichtig, ein Hintergrundbild zu wählen, das mobilfreundlich ist und Ihre Website nicht beeinträchtigt.Website-Geschwindigkeit. Andernfalls schadet es IhremWordPress-SEO.

Sehen wir uns also die verschiedenen Möglichkeiten an, wie Sie ein WordPress-Hintergrundbild hinzufügen können. Wir werden mehrere Methoden behandeln, darunter die Verwendung des WordPress-Theme-Customizers, des vollständigen Site-Editors, eines Plugins, des Theme-Builders und mehr.

Klicken Sie einfach auf einen der unten stehenden Links, um zu dem von Ihnen gewünschten Abschnitt zu gelangen:

• Hinzufügen eines Hintergrundbildes mit dem WordPress Theme Customizer
• Hinzufügen eines benutzerdefinierten Hintergrundbildes mit dem Full Site Editor
• Hintergrundbild mit WordPress Theme Builder hinzufügen
• Hinzufügen eines benutzerdefinierten Hintergrundbildes in WordPress mithilfe eines Plugins
• Hintergrundbilder mit CSS Hero hinzufügen
• Hinzufügen von benutzerdefinierten Hintergrundbildern an beliebiger Stelle in WordPress mit CSS-Code

Methode 1. Hinzufügen eines Hintergrundbildes mit dem WordPress-Theme-Customizer

Die meistenbeliebte WordPress-Themes werden mit Unterstützung für benutzerdefinierte Hintergründe geliefert. Mit dieser Funktion können Sie ganz einfach ein Hintergrundbild festlegen, und wir empfehlen diese Methode, wenn Ihr Theme sie unterstützt.

Wenn jedoch IhrMenüoption im Customizer fehltdann ist in Ihrem Theme möglicherweise die vollständige Website-Bearbeitung aktiviert. Im nächsten Abschnitt erfahren Sie, wie Sie den Full Site Editor verwenden, um Ihr Hintergrundbild zu ändern.

Um den Customizer zu verwenden, müssen Sie die SeiteErscheinungsbild “ Anpassen Seite in Ihrem WordPress-Administrationsbereich. Dies wird dieWordPress Theme-Anpassungsprogramm wo Sie verschiedene Themeneinstellungen ändern können, während Sie eine Live-Vorschau Ihrer Website sehen.

Wichtig ist, dass die Optionen, die Sie sehen, je nach verwendetem WordPress-Theme variieren. Für dieses Tutorial verwenden wir dasThema Astra.

Wenn Sie ein anderes Theme verwenden, müssen Sie möglicherweise in der Dokumentation dieses Themes nachsehen oder sich an den Entwickler des Themes wenden, um herauszufinden, wie Sie ein Hintergrundbild hinzufügen können, wenn Sie es im Customizer nicht finden können.

In den Anpassungsoptionen des Astra-Themas müssen Sie im linken Bereich auf „Global“ klicken.

Danach sehen Sie verschiedene globale Optionen, mit denen Sie Ihr Astra-Theme anpassen können.

Klicken Sie nun auf den Abschnitt „Farben“.

Hier können Sie die Farben des Themas, einschließlich der Hintergrundfarbe, ändern. Sie können auch Ihre Links, den Text, die Überschriften, die Rahmen und vieles mehr anpassen.

Um ein Hintergrundbild hinzuzufügen, blättern Sie nach unten zum Abschnitt „Oberflächenfarbe“. Klicken Sie dann auf die Option „Seitenhintergrund“ und wechseln Sie auf die Registerkarte „Bild“.

Danach klicken Sie einfach auf die Schaltfläche „Hintergrundbild auswählen“.

Daraufhin wird die WordPress-Mediathek aufgerufen, in die Sie ein Bild von Ihrem Computer hochladen oder ein bereits hochgeladenes Bild auswählen können.

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

Dadurch wird das Medien-Popup geschlossen, und Sie sehen eine Vorschau des ausgewählten Hintergrundbildes im Theme-Customizer.

Vergessen Sie nicht, oben auf die Schaltfläche „Veröffentlichen“ zu klicken, um Ihre Einstellungen zu speichern.

Das war’s schon. Sie haben erfolgreich ein Hintergrundbild zu Ihrer WordPress-Website hinzugefügt. Besuchen Sie nun Ihre Website, um es in Aktion zu sehen.

Methode 2. Hinzufügen eines benutzerdefinierten Hintergrundbildes mit dem Full Site Editor

Wenn Sie eineblockbasiertes WordPress-Themedann können Sie mit dem Full Site Editor (FSE) ein benutzerdefiniertes Hintergrundbild hinzufügen.

Mit dem vollständigen Site-Editor können Sie das Design Ihrer Website mithilfe von Blöcken bearbeiten. Es ist genau wie die Bearbeitung eines Blogbeitrags oder einer Seite mit demWordPress-Block-Editor.

Für dieses Tutorial verwenden wir das Standardthema Twenty Twenty-Two. Um den vollständigen Site-Editor zu starten, gehen Sie einfach zuErscheinungsbild “ Editor von Ihrem WordPress-Dashboard aus.

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

Klicken Sie einfach auf das „+“-Zeichen am oberen Rand und fügen Sie einen Deckungsblock hinzu.

Klicken Sie auf die Schaltfläche „Hochladen“ oder „Mediathek“ im Titelblock, um dem Block ein Hintergrundbild hinzuzufügen.

Dadurch wird das WordPress-Popup-Fenster zum Hochladen von Medien geöffnet.

Sie können ein Bild auswählen, das Sie als Hintergrund für die Website verwenden möchten.

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

Sobald das Bild dem Cover-Block hinzugefügt wurde, wird es als Hintergrund der Seite festgelegt.

Klicken Sie dazu oben auf das Symbol für die Listenansicht (Symbol mit 3 Strichen), um eine Übersicht über die Elemente des Themas zu öffnen, z. B. die Kopf- und Fußzeile der Website.

Ziehen Sie dann einfach alle Vorlagenteile in der Listenansicht unter den Cover-Block und legen Sie sie dort ab.

Wenn sie sich alle darunter befinden, wird das Bild des Titelblocks als Hintergrund der Website angezeigt.

Danach können Sie das Hintergrundbild anpassen, indem Sie in den Abdeckungsblock klicken und das Zahnradsymbol in der oberen rechten Ecke des Bildschirms auswählen. Dadurch wird das Einstellungsfenster für den Block geöffnet.

Sie finden Optionen, um das Bild zu einem festen oder wiederholten Hintergrund zu machen, seine Überlagerung anzupassen, die Farbe zu bearbeiten und vieles mehr.

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

Das war’s! Sie haben erfolgreich ein Hintergrundbild mit dem vollständigen Site-Editor hinzugefügt.

Methode 3. Hintergrundbild mit WordPress Theme Builder hinzufügen

Eine andere Möglichkeit, benutzerdefinierte Hintergrundbilder zu Ihrer Website hinzuzufügen, ist die Verwendung eines WordPress Theme Builders wieSeedProd.

Es ist diebestes WordPress Landing Page Plugin und Website-Baukasten. Sie erhalten eine Drag-and-Drop-Funktionalität, mit der Sie das Design Ihrer Website ganz einfach anpassen können, ohne eine einzige Codezeile anfassen zu müssen.

Für dieses Tutorial verwenden wir die SeedProd Pro-Version, da sie den Theme Builder enthält. Außerdem gibt es eineSeedProd Lite Version, die Sie kostenlos testen können.

Zunächst müssen Sie das SeedProd-Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unsere Anleitung zuwie man ein WordPress-Plugin installiert.

Sobald das Plugin aktiviert ist, sehen Sie den SeedProd-Begrüßungsbildschirm in Ihrem WordPress-Dashboard. Geben Sie dann einfach Ihren Lizenzschlüssel ein und klicken Sie auf die Schaltfläche „Schlüssel überprüfen“. Sie finden den Lizenzschlüssel in Ihrem SeedProd-Kontobereich.

Als Nächstes müssen Sie sich auf den Weg machen zuSeedProd “ Theme Builder in Ihrem WordPress-Administrationsbereich.

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

SeedProd bietet nun mehrere Themenvorlagen zur Auswahl an.

Fahren Sie mit dem Mauszeiger über die Vorlage, die Sie verwenden möchten, und klicken Sie sie an. Für dieses Tutorial verwenden wir die Themenvorlage „Starter“.

Von hier aus generiert SeedProd verschiedene Vorlagen, wie z. B. die Homepage, einen einzelnen Beitrag oder eine einzelne Seite,Seitenleiste, Kopfzeile, und mehr.

Um ein Hintergrundbild hinzuzufügen, das auf der gesamten Website und in allen Themenvorlagen angezeigt wird, klicken Sie unter Global CSS auf die Option „Design bearbeiten“.

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

Klicken Sie einfach auf die Option „Hintergrund“.

Danach sehen Sie die Optionen für das Hintergrundbild.

Klicken Sie auf die Schaltfläche „Eigenes Bild verwenden“, um Ihr Bild hochzuladen, oder klicken Sie auf die Schaltfläche „Ein Archivbild verwenden“, um nach einem Archivbild zu suchen, das Sie als Hintergrund für Ihre Website verwenden können.

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

Das Plugin bietet auch Optionen zum Ändern der Hintergrundposition. Sie können wählen, ob Sie das Cover im Vollbildmodus verwenden möchten, ob es wiederholt werden soll und vieles mehr.

Außerdem können Sie mit dem Schieberegler „Hintergrund dimmen“ einstellen, wie dunkel das Hintergrundbild sein soll. 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 Bereiche Ihrer Website hinzufügen möchten, können Sie diese individuellen Themenvorlagen in SeedProd bearbeiten.

Weitere Einzelheiten finden Sie in unserem Leitfaden überwie man ganz einfach ein individuelles WordPress-Theme erstellt.

Methode 4. Hinzufügen eines benutzerdefinierten Hintergrundbildes in WordPress mithilfe eines Plugins

Mit einerWordPress-Plugin um ein Hintergrundbild hinzuzufügen, ist viel flexibler als die integrierten WordPress-Optionen.

Zunächst müssen Sie das Programm installieren und aktivieren.Vollbild-Hintergrund Pro Plugin. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung unterwie man ein WordPress-Plugin installiert.

Mit diesem Plugin können Sie für jeden Beitrag, jede Seite, jede Kategorie und vieles mehr einen anderen Hintergrund festlegen. Außerdem werden sie automatisch bildschirmfüllend sein und sich für mobile Geräte anpassen.

Nach der Aktivierung müssen Sie Folgendes besuchenErscheinungsbild “ Vollbild-BG-Bild um die Einstellungen des Plugins zu konfigurieren.

Sie werden aufgefordert, Ihren Lizenzschlüssel hinzuzufügen. Sie erhalten diese Informationen in der E-Mail, die Sie nach dem Kauf des Plugins erhalten haben, oder in Ihrem Konto auf der Website des Plugins.

Als nächstes müssen Sie auf die Schaltfläche „Optionen speichern“ klicken, um Ihren Schlüssel zu aktivieren. Jetzt können Sie damit beginnen, Hintergrundbilder zu Ihrer WordPress-Website hinzuzufügen.

Klicken Sie auf die Schaltfläche „Neues Bild hinzufügen“ auf der Einstellungsseite des Plugins.

Sie sollten nun den Bildschirm zum Hochladen von Hintergrundbildern sehen.

Klicken Sie auf die Schaltfläche „Bild auswählen“, um ein Bild hochzuladen oder auszuwählen. Sobald Sie das Bild ausgewählt haben, können Sie eine Live-Vorschau des Bildes auf Ihrem Bildschirm sehen.

Als Nächstes müssen Sie einen Namen für dieses Bild angeben. Dieser Name ist nur für Sie bestimmt, Sie können hier also alles eingeben. Schließlich müssen Sie auswählen, wo Sie das Bild als Hintergrundseite verwenden möchten.

Wenn Sie ausgewählt haben, ob es der Hintergrund für die gesamte Website, für Beiträge, Kategorien, Archive oder andere Bereiche sein soll, vergessen Sie nicht, Ihre Änderungen zu speichern.

Sie können beliebig viele Bilder zu verschiedenen Bereichen Ihrer Website hinzufügen, indem Sie dieErscheinungsbild “ Vollbild-BG-Bild Seite und wiederholen diesen Vorgang.

Wenn Sie mehr als ein Bild einstellen, das global oder für Beiträge, Seiten und Kategorien verwendet werden soll, zeigt das Plugin die Hintergrundbilder automatisch als Diashow an.

In den Plugin-Einstellungen können Sie einstellen, wie lange es dauert, bis ein Bild ausgeblendet wird, und wie lange es dauert, bis ein neues Hintergrundbild eingeblendet wird.

Die Zeit, die Sie hier eingeben, wird in Millisekunden angegeben. 1 Sekunde sind 1000 Millisekunden. Wenn Sie möchten, dass ein Hintergrundbild nach 20 Sekunden ausgeblendet wird, müssen Sie 20000 eingeben.

Vergessen Sie nicht, auf die Schaltfläche „Optionen speichern“ zu klicken, um Ihre Änderungen zu speichern.

Hintergrundbilder für Beiträge, Seiten und Kategorien

Vollbild-Hintergrund Pro ermöglicht es Ihnen auch, Hintergrundbilder für einzelne Beiträge, Seiten, Kategorien, Tags und mehr festzulegen.

Bearbeiten Sie einfach den Beitrag/die Seite, auf der Sie ein anderes Hintergrundbild anzeigen möchten. Auf dem Bearbeitungsbildschirm für Beiträge sehen Sie das neue Feld „Vollbild-Hintergrundbild“ unterhalb des Beitragseditors.

Um ein Hintergrundbild für Kategorien, Beiträge und Seiten zu verwenden, müssen Sie dieErscheinungsbild “ Vollbild-BG-Bild Seite und klicken Sie dann auf die Schaltfläche „Neues Bild hinzufügen“.

Nachdem Sie Ihr Bild hochgeladen haben, können Sie eine Kategorie, Beiträge, Seiten, Archive und andere Optionen aus dem Dropdown-Menü „Wählen Sie den Kontext, in dem dieses Bild angezeigt werden soll“ auswählen.

Nehmen wir an, Sie möchten ein Hintergrundbild für Kategorieseiten anzeigen. Wählen Sie dazu einfach „Kategorie“ aus dem Dropdown-Menü.

Das Plugin bietet auch die Möglichkeit, das Hintergrundbild auf bestimmte Kategorien, Beiträge und Seiten zu beschränken.

Wenn Sie beispielsweise ein benutzerdefiniertes Hintergrundbild für bestimmte Kategorien hinzufügen möchten, geben Sie einfach die Namen der Kategorien in das Feld „Wählen Sie die Kategorien, auf die die Bilder beschränkt werden sollen“ ein.

Vergessen Sie nicht, Ihr Bild zu speichern, um Ihre Einstellungen zu sichern.

Sie haben nun erfolgreich ein Hintergrundbild für bestimmte Beiträge, Seiten und Kategorien hinzugefügt.

Methode 5. Hintergrundbilder mit CSS Hero hinzufügen

CSS Held ist ein WordPress-Plugin, mit dem Sie Änderungen an Ihrem Theme vornehmen können, ohne auch nur eine einzige Code-Zeile anzufassen.

Sie können Hintergrundbilder in wenigen einfachen Schritten schnell hinzufügen. Zunächst müssen Sie CSS Hero installieren und aktivieren. Weitere Details finden Sie in unserer Anleitung zuwie man ein WordPress-Plugin installiert.

Wenn Sie das getan haben, ist es an der Zeit, Ihre Website anzupassen. Rufen Sie nun Ihre Homepage in Ihrem Browser auf. Sie sehen den Link „Anpassen mit CSS Hero“ in IhremVerwaltungsleiste.

Nachdem Sie auf diesen Link geklickt haben, sehen Sie dieCSS Held öffnen sich die Optionen. Fahren Sie mit der Maus über den Bereich, dem Sie ein Bild hinzufügen möchten.

Wenn Sie auf den ausgewählten Bereich klicken, wird in der linken Seitenleiste die Option „Hintergrund“ angezeigt.

Klicken Sie auf „Hintergrund“, um die Einstellungen für das Hinzufügen eines Bildes anzuzeigen.

Von dort aus können Sie auf „Bild“ klicken. Jetzt 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, wird die Schaltfläche „Bild anwenden“ angezeigt. Dann können Sie wählen, welche Größe Ihr Bild haben soll. Sie können die große Version wählen, damit es sich über die ganze Seite erstreckt.

Klicken Sie unten auf „Speichern und veröffentlichen“, um das Hintergrundbild für Ihre Website zu speichern.

Methode 6. Hinzufügen von benutzerdefinierten Hintergrundbildern an beliebiger Stelle in WordPress mit CSS-Code

WordPress fügt standardmäßig mehrere CSS-Klassen zu verschiedenen HTML-Elementen auf Ihrer WordPress-Website hinzu. Sie können einzelnen Beiträgen, Kategorien, Autoren und anderen Seiten ganz einfach eigene Hintergrundbilder hinzufügen, indem Sie dieseVon WordPress generierte CSS-Klassen.

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

<

body.category-