So fügen Sie ein Hintergrundbild in WordPress hinzu

Möchten Sie Ihrer WordPress-Site ein Hintergrundbild hinzufügen? Mit Hintergrundbildern können Sie Ihre Website ansprechender und ästhetischer gestalten. In diesem Artikel zeigen wir Ihnen, wie Sie problemlos ein Hintergrundbild zu Ihrer WordPress-Site hinzufügen.

Videoanleitung

Wenn Ihnen das Video nicht gefällt oder Sie weitere Anweisungen benötigen, lesen Sie weiter.

Methode 1. Fügen Sie ein Hintergrundbild mit Ihren WordPress-Theme-Einstellungen hinzu

Die meisten kostenlosen und erstklassigen WordPress-Themes verfügen über eine benutzerdefinierte Hintergrundunterstützung. Mit dieser Funktion können Sie einfach ein Hintergrundbild für Ihre WordPress-Site festlegen.

Wenn Ihr Design eine benutzerdefinierte Hintergrundfunktion unterstützt, empfehlen wir die Verwendung dieser Methode, um ein Hintergrundbild zu Ihrer WordPress-Site hinzuzufügen. Wenn Ihr Design jedoch keine benutzerdefinierten Hintergrundfunktionen unterstützt, können Sie in diesem Artikel andere Methoden verwenden.

Zuerst müssen Sie die besuchen Aussehen »Anpassen Seite in Ihrem WordPress-Admin. Dadurch wird das WordPress-Designanpassungsprogramm gestartet, in dem Sie verschiedene Designeinstellungen ändern können, während Sie eine Live-Vorschau Ihrer Website anzeigen.

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

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

Dadurch wird das Popup-Fenster des WordPress-Medien-Uploaders geöffnet, 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 nach dem Hochladen oder Auswählen des Bildes, das Sie als Hintergrund verwenden möchten, auf die Schaltfläche Bild auswählen klicken.

Das Popup-Fenster für den Medien-Uploader wird geschlossen, und die Vorschau des ausgewählten Bildes wird im Design-Customizer angezeigt.

Unter dem Bild können Sie auch die Hintergrundbildoptionen sehen. Unter Voreinstellung können Sie auswählen, wie das Hintergrundbild angezeigt werden soll: Bildschirm füllen, Bildschirm anpassen, wiederholen oder benutzerdefiniert.

Sie können auch die Hintergrundbildposition auswählen, indem Sie auf die Pfeile unten klicken. Wenn Sie auf die Mitte klicken, wird das Bild auf die Mitte des Bildschirms ausgerichtet.

Vergessen Sie nicht, auf die Schaltfläche "Speichern & Veröffentlichen" oben zu klicken, um Ihre Einstellungen zu speichern. Das ist alles, Sie haben erfolgreich ein Hintergrundbild zu Ihrer WordPress-Site hinzugefügt.

Besuchen Sie Ihre Website, um sie in Aktion zu sehen.

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

Diese Methode ist wesentlich flexibler. Es funktioniert mit jedem WordPress-Theme und ermöglicht das Festlegen mehrerer Hintergrundbilder. Sie können auch verschiedene Hintergründe für jeden Beitrag, jede Seite, Kategorie oder jeden anderen Abschnitt Ihrer WordPress-Site festlegen.

Alle Ihre Hintergrundbilder werden automatisch als Vollbild angezeigt und reagieren mobil. Dies bedeutet, dass sich das Hintergrundbild auf kleineren Geräten automatisch ändert.

Zunächst müssen Sie das Plug-In für Full Screen Background Pro installieren und aktivieren. Weitere Informationen finden Sie in unserer schrittweisen Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung müssen Sie besuchen Aussehen »Vollbild-BG-Bild Seite, um die Plugin-Einstellungen zu konfigurieren.

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

Als Nächstes müssen Sie auf die Schaltfläche Einstellungen speichern klicken, um Ihre Änderungen zu speichern. Sie können jetzt Hintergrundbilder zu Ihrer WordPress-Site hinzufügen.

Klicken Sie auf der Einstellungsseite des Plugins auf die Schaltfläche "Neues Bild hinzufügen". Dadurch gelangen Sie zum Hintergrundbild-Upload-Bildschirm.

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

Als Nächstes müssen Sie einen Namen für dieses Bild angeben. Dieser Name wird intern verwendet, sodass Sie hier alles verwenden können.

Schließlich müssen Sie auswählen, wo dieses Bild als Hintergrundseite verwendet werden soll. Mit Full Screen Background Pro können Sie Bilder global als Hintergrund festlegen, oder Sie können aus verschiedenen Bereichen Ihrer Website auswählen, wie z. B. Kategorien, Archiven, Titelseiten, Blogseiten usw..

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

Sie können so viele Bilder hinzufügen, wie Sie möchten Aussehen »Vollbild-BG-Bild Seite.

Wenn Sie mehrere Bilder für die globale Verwendung festlegen, zeigt das Plugin automatisch Hintergrundbilder als Diashow an.

Sie können die Zeit einstellen, die ein Bild zum Ausblenden benötigt, und die Zeit, nach der ein neues Hintergrundbild eingeblendet wird.

Die Zeit, die Sie hier eingeben, ist in Millisekunden. Wenn ein Hintergrundbild nach 20 Sekunden ausgeblendet werden soll, müssen Sie 20000 eingeben.

Vergessen Sie nicht, auf die Schaltfläche zum Speichern der Einstellungen zu klicken, um Ihre Änderungen zu speichern.

Hintergrundbild für einzelne Beiträge, Seiten, Kategorien usw. Einstellen

Mit Full Screen Background Pro können Sie auch Hintergrundbilder für einzelne Beiträge, Seiten, Kategorien, Tags usw. festlegen.

Bearbeiten Sie einfach die Post / Seite, auf der Sie ein anderes Hintergrundbild anzeigen möchten. Auf dem Nachbearbeitungsbildschirm wird das neue Feld "Vollbild-Hintergrundbild" unter dem Beitragseditor angezeigt.

Um ein Hintergrundbild für eine bestimmte Kategorie zu verwenden, müssen Sie besuchen Aussehen »Vollbild-BG-Bild Klicken Sie anschließend auf die Schaltfläche "Neues Bild hinzufügen".

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

Geben Sie nun die spezifische Kategorie-ID oder den Slug ein, an dem Sie das Bild anzeigen möchten. In unserem Handbuch finden Sie Informationen zur Suche nach Kategorie-IDs in WordPress.

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

Methode 3. Benutzerdefinierte Hintergrundbilder überall in WordPress mit CSS hinzufügen

Standardmäßig fügt WordPress verschiedenen HTML-Elementen in Ihrer WordPress-Site mehrere CSS-Klassen hinzu. Mit diesen von WordPress generierten CSS-Klassen können Sie ganz einfach benutzerdefinierte Hintergrundbilder zu einzelnen Posts, Kategorien, Autoren und anderen Seiten hinzufügen.

Wenn Sie auf Ihrer Website beispielsweise eine Kategorie mit dem Namen TV haben, fügt WordPress diese CSS-Klassen automatisch dem body-Tag hinzu, wenn jemand die Seite mit der TV-Kategorie anzeigt.

Mit dem Inspect-Tool können Sie genau sehen, welche CSS-Klassen von WordPress zum body-Tag hinzugefügt werden.

Sie können beide verwenden Kategorie-TV oder Kategorie-4 CSS-Klasse, um nur diese Kategorieseite anders zu gestalten.

Fügen Sie zu einer Kategorie-Archivseite ein benutzerdefiniertes Hintergrundbild hinzu. Sie müssen dieses benutzerdefinierte CSS Ihrem Design hinzufügen.

 body.category-tv Hintergrundbild: URL ("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg"); Hintergrundposition: Mitte Mitte; Hintergrundgröße: Cover; Hintergrundwiederholung: keine Wiederholung; Hintergrundaufsatz: feststehend;  

Vergessen Sie nicht, die Hintergrundbild-URL und die Kategorieklasse durch Ihre eigene Kategorie zu ersetzen.

Sie können auch individuelle Hintergründe zu einzelnen Posts und Seiten hinzufügen. WordPress fügt eine CSS-Klasse mit der Beitrags- oder Seiten-ID im body-Tag hinzu. Sie können denselben CSS-Code verwenden, indem Sie .category-tv einfach durch die postspezifische CSS-Klasse ersetzen.

Wir hoffen, dass Sie mit diesem Artikel erfahren haben, wie Sie ein Hintergrundbild in WordPress hinzufügen. Vielleicht möchten Sie auch unsere Liste mit äußerst nützlichen Tricks für die WordPress-Funktionsdatei sehen.

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