So fügen Sie ein Hintergrundbild in WordPress hinzu

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

Hintergrundbilder können verwendet werden, um Ihre Website ansprechender und ästhetisch ansprechend zu gestalten.

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

Methode 1. Fügen Sie ein Hintergrundbild über die Einstellungen Ihres WordPress-Themes hinzu

Die meisten beliebten WordPress-Themes werden mit Unterstützung für benutzerdefinierte Hintergründe geliefert. Mit dieser Funktion können Sie einfach ein Hintergrundbild für Ihre WordPress-Site festlegen.

Wenn Ihr Theme die Funktion für benutzerdefinierte Hintergründe unterstützt, empfehlen wir diese Methode, um ein Hintergrundbild zu Ihrer WordPress-Website hinzuzufügen.

Wenn Ihr Theme diese Funktion jedoch nicht unterstützt oder Ihnen nicht gefällt, wie es Hintergrundbilder implementiert, dann können Sie die anderen in unserem Tutorial genannten Optionen ausprobieren.

Zuerst müssen Sie die Seite Darstellung “ Anpassen in Ihrem WordPress-Admin 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.

Als nächstes müssen Sie auf die Option „Hintergrundbild“ klicken. Das Panel wird eingeblendet und zeigt Ihnen die Optionen zum Hochladen oder Auswählen eines Hintergrundbildes für Ihre Website.

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

Daraufhin wird das WordPress-Medien-Uploader-Popup-Fenster angezeigt, in dem Sie ein Bild von Ihrem Computer hochladen können. Sie können auch ein zuvor hochgeladenes Bild aus der Medienbibliothek auswählen.

Als Nächstes müssen Sie auf die Schaltfläche „Bild auswählen“ klicken, nachdem Sie das Bild, das Sie als Hintergrund verwenden möchten, hochgeladen oder ausgewählt haben.

Dadurch wird das Popup-Fenster des Medien-Uploaders geschlossen, und Sie sehen die Vorschau des ausgewählten Bildes im Theme-Customizer.

Unterhalb des Bildes können Sie auch die Optionen für das Hintergrundbild sehen. Unter „Voreinstellung“ können Sie auswählen, wie das Hintergrundbild angezeigt werden soll: Bildschirm füllen, Bildschirm einpassen, wiederholen oder benutzerdefiniert.

Sie können auch die Position des Hintergrundbildes auswählen, indem Sie auf die Pfeile darunter klicken. Wenn Sie auf „Mitte“ klicken, wird das Bild in der Mitte des Bildschirms ausgerichtet.

Vergessen Sie nicht, oben auf die Schaltfläche „Speichern & Veröffentlichen“ zu klicken, um Ihre Einstellungen zu speichern. Das war’s, Sie haben erfolgreich ein Hintergrundbild zu Ihrer WordPress-Seite hinzugefügt.

Besuchen Sie nun Ihre Website, um es in Aktion zu sehen.

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

Diese Methode ist viel flexibler. Sie funktioniert mit jedem WordPress-Theme und ermöglicht es Ihnen, mehrere Hintergrundbilder festzulegen.

Sie können auch verschiedene Hintergründe für jeden Beitrag, jede Seite, jede Kategorie oder jeden anderen Bereich Ihrer WordPress-Website festlegen.

Es macht alle Ihre Hintergrundbilder automatisch bildschirmfüllend und mobil-responsiv. Das bedeutet, dass sich Ihr Hintergrundbild auf kleineren Geräten automatisch in der Größe anpasst.

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

Nach der Aktivierung müssen Sie Appearance “ Full Screen BG Image besuchen, um die Plugin-Einstellungen zu konfigurieren.

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

Als nächstes müssen Sie auf die Schaltfläche „Einstellungen speichern“ klicken, um Ihre Änderungen zu speichern. Jetzt können Sie beginnen, Hintergrundbilder zu Ihrer WordPress-Website hinzuzufügen.

Klicken Sie dazu auf der Einstellungsseite des Plugins auf die Schaltfläche „Neues Bild hinzufügen“. Dadurch gelangen Sie zum Bildschirm für das Hochladen von Hintergrundbildern.

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 wird intern verwendet, Sie können hier also alles verwenden.

Schließlich müssen Sie auswählen, wo dieses Bild als Hintergrundseite verwendet werden soll.

Mit Full Screen Background Pro können Sie Bilder als globalen Hintergrund einstellen, oder Sie können aus verschiedenen Abschnitten Ihrer Website wie Kategorien, Archive, Front- oder Blog-Seite wählen.

Vergessen Sie nicht, auf die Schaltfläche „Bild speichern“ zu klicken, um Ihr Hintergrundbild zu speichern.

Sie können so viele Bilder hinzufügen, wie Sie möchten, indem Sie die Seite Erscheinungsbild “ Vollbild-Hintergrundbild besuchen.

Wenn Sie mehr als ein Bild einstellen, das global verwendet werden soll, dann beginnt das Plugin automatisch, die Hintergrundbilder als Diashow anzuzeigen.

Sie können einstellen, wie lange es dauert, bis ein Bild ausgeblendet wird und nach welcher Zeit ein neues Hintergrundbild eingeblendet wird.

Die Zeit, die Sie hier eingeben, ist in Millisekunden. Wenn Sie möchten, dass ein Hintergrundbild nach 20 Sekunden ausgeblendet wird, dann müssen Sie 20000 eingeben.

Vergessen Sie nicht, auf die Schaltfläche Einstellungen 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 des Beitrags werden Sie das neue Feld „Vollbild-Hintergrundbild“ unterhalb des Beitragseditors bemerken.

Um ein Hintergrundbild für eine bestimmte Kategorie zu verwenden, müssen Sie die Seite Erscheinungsbild “ Vollbild-Hintergrundbild besuchen und dann auf die Schaltfläche „Neues Bild hinzufügen“ klicken.

Nachdem Sie Ihr Bild hochgeladen haben, können Sie „Kategorie“ als den Kontext auswählen, in dem Sie das Hintergrundbild anzeigen möchten.

Geben Sie nun die spezifische Kategorie-ID oder den Slug ein, in dem Sie das Bild anzeigen möchten. Sehen Sie sich unsere Anleitung an, wie Sie die Kategorie-ID in WordPress finden.

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

Methode 3. Hinzufügen von Hintergrundbildern mit CSS Hero

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

Sie können Hintergrundbilder in wenigen einfachen Schritten schnell hinzufügen. Zuerst müssen Sie CSS Hero installieren und aktivieren. Sobald Sie das getan haben, ist es an der Zeit, mit der Anpassung Ihrer Website zu beginnen.

Öffnen Sie nun Ihre Homepage in Ihrem Browser. In Ihrer Admin-Leiste sehen Sie den Link „Anpassen mit CS SHero“.

Nachdem Sie auf diesen Link geklickt haben, sehen Sie, dass sich die CSS Hero-Optionen öffnen. Bewegen Sie die Maus über den Bereich, dem Sie ein Bild hinzufügen möchten.

Im Screenshot unten sehen Sie den Bereich .header-filter-gradient. Wenn Sie auf diesen Bereich klicken, können Sie dann den Hintergrund-Link in der linken Seitenleiste auswählen.

Der Hintergrund-Link wird geöffnet. Von dort aus können Sie auf „Bild“ klicken Nun können Sie ein Bild von Unsplash oder aus Ihren Uploads auswählen, 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. Wir haben die große Version gewählt, damit es sich über die ganze Seite erstreckt.

Klicken Sie unten auf „Speichern und veröffentlichen“, und das Hintergrundbild ist nun für Ihre Website gespeichert.

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

Standardmäßig fügt WordPress verschiedene CSS-Klassen zu verschiedenen HTML-Elementen auf Ihrer WordPress-Website hinzu. Mit diesen 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 z. B. 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 genau 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.kategorie-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 Ihre eigene Kategorie zu ersetzen.

Sie können auch individuelle Hintergründe zu einzelnen Beiträgen 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.