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?

Das Hinzufügen eines Bildes zu Ihrer WordPress-Website kann sie für Besucher attraktiver machen. Sie können schnell die Aufmerksamkeit der Nutzer 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.

Darüber hinaus können Sie auch ein YouTube-Video als vollständigen Hintergrund oder eine Bild-Diashow hinzufügen, die Ihre Inhalte zum Leben erwecken wird.

Wir empfehlen jedoch, Hintergrundbilder zu wählen, die nicht ablenken oder das Lesen des Inhalts Ihres WordPress-Blogs erschweren. Ein Hintergrund sollte das Benutzererlebnis verbessern und dazu beitragen, Ihre Botschaft an die Besucher zu vermitteln.

Es ist auch wichtig, ein Hintergrundbild zu wählen, das mobilfreundlich ist und die Geschwindigkeit Ihrer Website nicht beeinträchtigt. Andernfalls schadet es Ihrer WordPress-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
• Hinzufügen eines Hintergrundbildes mit dem WordPress Theme Builder
• Hinzufügen eines benutzerdefinierten Hintergrundbildes in WordPress mit einem Plugin
• Hinzufügen von Hintergrundbildern mit CSS Hero
• Hinzufügen von benutzerdefinierten Hintergrundbildern überall in WordPress mit CSS-Code

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

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

Wenn jedoch die Menüoption im Customizer fehlt, 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 Seite Erscheinungsbild “ Anpassen in Ihrer WordPress-Verwaltung aufrufen. Dadurch wird der WordPress-Theme-Customizer gestartet, in dem Sie verschiedene Theme-Einstellungen ä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 das Astra-Theme.

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 ein blockbasiertes WordPress-Theme verwenden, 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 dem WordPress-Block-Editor.

Für dieses Tutorial verwenden wir das Standardthema Twenty Twenty-Two. Um den vollständigen Site-Editor aufzurufen, gehen Sie in Ihrem WordPress-Dashboard einfach auf Darstellung “ Editor.

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 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 und Website Builder. Sie erhalten eine Drag-and-Drop-Funktionalität, mit der Sie das Design Ihrer Website ganz einfach anpassen können, ohne eine einzige Codezeile zu berühren.

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

Zunächst müssen Sie das SeedProd-Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unsere Anleitung zur Installation eines WordPress-Plugins.

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 in Ihrem WordPress-Admin-Panel zu SeedProd “ Theme Builder gehen.

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

SeedProd wird nun mehrere Themenvorlagen zur Auswahl anbieten.

Bewegen Sie den Mauszeiger über eine beliebige 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, den einzelnen Beitrag, die einzelne Seite, die Seitenleiste, die 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 unserer Anleitung zur einfachen Erstellung eines benutzerdefinierten WordPress-Themes.

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

Die Verwendung eines WordPress-Plugins zum Hinzufügen eines Hintergrundbildes ist viel flexibler als die integrierten WordPress-Optionen.

Zunächst müssen Sie das Full Screen Background Pro-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

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 die Plugin-Einstellungen unter Erscheinungsbild “ Vollbild-BG-Bild 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 die Seite Erscheinungsbild “ Vollbild-BG-Bilder aufrufen und diesen Vorgang wiederholen.

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

MitFull Screen Background Pro können Sie auch Hintergrundbilder für einzelne Beiträge, Seiten, Kategorien, Tags und mehr festlegen.

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 die Seite Erscheinungsbild “ Vollbild-BG-Bild aufrufen und dann auf die Schaltfläche „Neues Bild hinzufügen“ klicken.

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 Kategorienamen in das Feld „Wählen Sie die Kategorien aus, 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 Hero 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. Zuerst müssen Sie CSS Hero installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins.

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

Nachdem Sie auf diesen Link geklickt haben, öffnen sich die CSS Hero-Optionen. Bewegen Sie Ihre 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. Mithilfe dieser von WordPress generierten CSS-Klassen können Sie ganz einfach benutzerdefinierte Hintergrundbilder zu einzelnen Beiträgen, Kategorien, Autoren und anderen Seiten hinzufügen.

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 class="archive category category-tv category-4">

Sie können das Inspektionstool verwenden, um genau zu sehen, welche CSS-Klassen von WordPress zum Body-Tag hinzugefügt werden.

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

Fügen wir ein benutzerdefiniertes Hintergrundbild zu einer Kategorie-Archivseite hinzu. Sie müssen dieses benutzerdefinierte CSS zu Ihrem Thema hinzufü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 Hintergrundbildes und die Kategorieklasse durch solche von Ihrer eigenen Website zu ersetzen.

Sie können auch individuelle Hintergründe für einzelne Beiträge und Seiten hinzufügen. WordPress fügt eine CSS-Klasse mit der ID des Beitrags oder der Seite in den Body-Tag ein. Sie können denselben CSS-Code verwenden. Ersetzen Sie einfach .category-tv durch die postspezifische CSS-Klasse.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie man ein Hintergrundbild in WordPress einfügt. Vielleicht interessieren Sie sich auch für unseren Leitfaden zur Eröffnung eines Online-Shops und die beste Website-Design-Software.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.