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.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. 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. 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. Vergessen Sie nicht, Ihr Bild zu speichern, um Ihre Einstellungen zu sichern.
Methode 3.
Sie können Hintergrundbilder in wenigen einfachen Schritten schnell hinzufügen. 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.
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.Nachdem Sie auf diesen Link geklickt haben, sehen Sie, dass sich die CSS Hero-Optionen öffnen.
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
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.
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.
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.