loader image

Radiboxes Server machen WordPress Websites bis zu 4x schneller - ohne zusätzliche Optimierung. Raidboxes migriert deine Website und du kannst selbst vergleichen. Wenn du zufrieden bist, wähle einfach das passende Paket in deren Preistabelle.

4.97

Sehr gut

trustedshops.de

Autor

duckducknews

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.

Background image option in WordPress theme customizer

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.

Select background image

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.

Upload background image

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.

Background image settings

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.

Full screen background

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.

add new background image

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.

Background fade in and fade out settings

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.

Adding a background image for a single post or page

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.

Set background image for a specific category

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“.

Background Image with CSS Hero

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.

WordPress background image selector

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.

Add image to background with CSS Her

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.

Custom background WordPress image

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.

Use inspect tool to see classes added by WordPress

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.

Die beliebtesten Beiträge

Wie man den ungültigen JSON-Fehler in WordPress behebt (Anleitung für Anfänger)

Versuchen Sie, den ungültigen JSON-Fehler in WordPress zu beheben? Dieser Fehler tritt auf, wenn Sie WordPress-Beiträge oder -Seiten auf Ihrer Website bearbeiten. Sie erhalten die Meldung "Die Antwort ist keine gültige JSON-Antwort" und die Aktualisierung der Seite schlägt fehl. In diesem Artikel zeigen wir Ihnen, wie Sie den ungültigen JSON-Fehler ...

So beheben Sie den Fehler „Verbindung ist nicht privat“ (Anleitung für Website-Besitzer)

Sehen Sie die Fehlermeldung "Ihre Verbindung ist nicht privat" auf Ihrer WordPress-Website? Dies ist die Fehlermeldung, die Sie in Google Chrome sehen. Der gleiche Fehler wird auf allen modernen Browsern mit leicht unterschiedlichen Meldungen angezeigt und kann für Anfänger bei der Fehlerbehebung etwas verwirrend sein. In dieser Anleitung für Website-Besitzer ...

Wie man eine Seite in voller Breite in WordPress erstellt (Anleitung für Anfänger)

Möchten Sie eine Seite in voller Breite in WordPress erstellen, so dass Sie Ihren Inhalt über den Bildschirm strecken können? Die meisten WordPress-Themes verfügen bereits über eine integrierte Vorlage für eine Seite in voller Breite, die Sie verwenden können. Wenn Ihr Theme jedoch keine hat, dann ist es einfach, sie ...
DSGVO Cookie-Einwilligung mit Real Cookie Banner