🖼 So fügst du unterschiedliche Hintergründe für WordPress-Beiträge und -Seiten hinzu
Das Standard-Theme von WordPress wirkt aufgeräumt, doch nach einem Monat Nutzung wünscht man sich etwas mehr Individualität. Ein farbiger Hintergrund für eine wichtige Seite oder ein Hintergrundbild für bestimmte Beiträge ist ein einfacher Weg, Inhalte visuell hervorzuheben, ohne die gesamte Website neu zu gestalten.
Sie können dies auf drei Arten erreichen: mit ein paar Zeilen CSS, einem kleinen PHP-Snippet oder einem fertigen Plugin. Keine dieser Methoden erfordert tiefgehende Frontend-Kenntnisse; Sie müssen nur wissen, wo Sie den Code einfügen.
Im Folgenden betrachten wir alle drei Methoden mit konkreten Code-Fragmenten, Dateipfaden und einem ehrlichen Blick auf mögliche Fallstricke.
💡 Kurzüberblick:
- Öffnen Sie header.php und suchen Sie die Funktion
body_class(). Sie erzeugt eindeutige CSS-Klassen für jede Seite und jeden Beitrag, sodass Sie Hintergründe bis auf einen einzelnen Beitrag genau ansteuern können. - Fügen Sie in style.css eine CSS-Regel mit der passenden Klasse hinzu. Der Hintergrund wird nur auf die gewünschte Seite oder den gewünschten Beitrag angewendet, ohne den Rest der Website zu beeinflussen.
- Erstellen Sie ein benutzerdefiniertes Feld und fügen Sie ein PHP-Snippet in functions.php ein. Der Hintergrund wird über eine Bild-URL direkt aus der WordPress-Administration gesetzt, ohne manuelle CSS-Bearbeitung.
So fügen Sie einen Hintergrund per CSS und body_class hinzu
WordPress weist dem <body>-Tag automatisch eine Reihe von CSS-Klassen über die Funktion body_class() zu. Darunter befinden sich eindeutige Kennungen für bestimmte Beiträge oder Seiten, mit denen Sie Hintergründe chirurgisch präzise ansteuern können.
Stellen Sie sicher, dass Ihr Theme body_class() aufruft. Öffnen Sie Design → Theme-Datei-Editor und suchen Sie die Datei header.php:
Suchen Sie in header.php den öffnenden <body>-Tag. Daneben sollte sich die Funktion befinden:
1 <body <?php body_class(); ?>>
Wenn Sie nur <body> ohne die Funktion sehen, fügen Sie sie hinzu. Die meisten modernen Themes enthalten diesen Aufruf bereits, aber eine Überprüfung lohnt sich.
Öffnen Sie nun eine beliebige Seite Ihrer Website und zeigen Sie deren Quellcode an (Rechtsklick → Seitenquelltext anzeigen in Chrome). Für einen einzelnen Beitrag sehen Sie etwa Folgendes:
1 <body class="single single-post postid-1 single-format-standard logged-in">
Für eine Seite sieht die Ausgabe anders aus:
1 <body class="page page-id-2 page-template-default logged-in">
Hier sind die wichtigsten Klassen, die Sie mit CSS ansprechen können:
.single, alle Einzelbeiträge. Jeder Stil, der auf diese Klasse angewendet wird, betrifft jeden Blogbeitrag..postid-N, ein bestimmter Beitrag mit ID = N. Ideal für punktgenaues Styling..page, alle Seiten der Website..page-id-N, eine bestimmte Seite mit ID = N..single-format-standard, Beiträge mit dem Standardformat..logged-in, gilt nur für eingeloggte Benutzer (nützlich für die Fehlersuche).
Fügen Sie nun CSS zur Datei style.css Ihres Themes hinzu. Zum Beispiel, um einen schwarzen Hintergrund für alle Beiträge zu setzen:
1 .single { 2 background-color: #000; 3 }
Und um ein Hintergrundbild für eine bestimmte Seite mit ID 2 zu setzen:
1 .page-id-2 { 2 background-image: url('/wp-content/uploads/2026/01/my-background.jpg'); 3 background-size: cover; 4 background-position: center; 5 }
Die Seiten- oder Beitrags-ID finden Sie in der Administration: Öffnen Sie die Seitenliste, fahren Sie mit der Maus über den Titel, und Sie sehen post=2 oder eine ähnliche Zahl in der Statusleiste des Browsers. Im Gutenberg-Editor erscheint die ID in der URL: post.php?post=2&action=edit.
Der Vorteil dieser Methode liegt in ihrer Einfachheit: Sie fassen kein PHP an, installieren keine Plugins und wissen genau, welche Klasse was bewirkt. Der Nachteil: Wenn Sie das Theme wechseln, gehen alle Stile aus style.css verloren, sofern Sie kein Child-Theme verwenden.
So setzen Sie einen Hintergrund per benutzerdefiniertem Feld und PHP
Wenn Sie das Hintergrundbild direkt aus der Administration ändern müssen, ohne jedes Mal in CSS einzutauchen, funktioniert die Methode mit dem benutzerdefinierten Feld gut. Sie erstellen ein Feld für die Bild-URL, und ein kleines PHP-Snippet in functions.php fügt es in das background-image-Attribut ein.
Fügen Sie den folgenden Code in die functions.php Ihres aktiven Themes ein. Wenn Sie ein Drittanbieter-Theme nutzen, verwenden Sie unbedingt ein Child-Theme; andernfalls gehen Änderungen bei Updates verloren:
1 <?php 2 /** 3 * Adds an inline style for body background via a custom field. 4 * Replace 'myprefix' with your own unique prefix. 5 */ 6 function myprefix_custom_field_background() { 7 $background = get_post_meta( get_the_ID(), 'myprefix_background_image', true ); 8 if ( $background ) { 9 ?> 10 <style type="text/css"> 11 body { 12 background-image: url( "<?php echo esc_url( $background ); ?>" ); 13 } 14 </style> 15 <?php 16 } 17 } 18 add_action( 'wp_head', 'myprefix_custom_field_background' );
Die Funktion hängt sich in wp_head ein, und der Inline-Stil wird in den <head> der Seite eingefügt. esc_url() bereinigt die URL, um potenziell gefährliche Zeichen zu entfernen, während get_post_meta() den Feldwert für den aktuellen Beitrag abruft.
Öffnen Sie nun einen beliebigen Beitrag oder eine Seite in der Administration, suchen Sie den Block Benutzerdefinierte Felder und erstellen Sie ein Feld mit dem Namen myprefix_background_image. Fügen Sie als Wert die vollständige URL des Hintergrundbildes ein. Speichern Sie, und der Hintergrund wird nur auf diesen Beitrag angewendet.
Falls der Block für benutzerdefinierte Felder nicht sichtbar ist: Öffnen Sie den Editor, klicken Sie auf die drei Punkte oben rechts → Einstellungen → Panels und aktivieren Sie „Benutzerdefinierte Felder".
Hinweis: Das Bild muss bereits in die WordPress-Mediathek hochgeladen sein; verwenden Sie den direkten Link zur Datei, nicht die Anhangsseite.
Plugins für Hintergründe: wenn Code nicht Ihre Sache ist
CSS und PHP decken die meisten Aufgaben ab, aber wenn Sie einen visuellen Ansatz bevorzugen, hier ist, was auf dem Markt verfügbar ist.
WP-Backgrounds Lite: Geschichte und Erkenntnisse
WP-Backgrounds Lite war vor einigen Jahren eine beliebte kostenlose Lösung für Hintergründe. Das Plugin erlaubte es, verschiedene Hintergründe für Beiträge, Seiten und benutzerdefinierte Beitragstypen festzulegen, und bot Unterstützung für Diashows und Videohintergründe. Seit Juni 2021 ist es jedoch im WordPress.org-Verzeichnis mit dem Hinweis „Sicherheitsproblem" geschlossen, und mehrere unabhängige Bewertungen wiesen auf eingeschleuste versteckte Links im Website-Code hin.
Die wichtigste Lehre: Für Aufgaben, die sich mit ein paar Zeilen CSS lösen lassen, lohnt sich die Installation eines ungeprüften Plugins nicht. Wenn Sie aber doch ein Plugin benötigen, prüfen Sie das Datum der letzten Aktualisierung und die Anzahl der aktiven Installationen.
Custom Backgrounds: ein kommerzieller Ansatz
Das Plugin Custom Backgrounds von RightHere auf CodeCanyon bietet volle Kontrolle: Hintergründe für Beiträge, Seiten, Taxonomien und Archive, Parallax-Effekte, Timer und mehrere Hintergründe pro Seite. Das Plugin ist kostenpflichtig, mit der Möglichkeit einer Vorschau vor dem Kauf.
Der Nachteil: Der Autor hat das Produkt seit mehreren Jahren nicht aktualisiert, sodass die Kompatibilität mit aktuellen WordPress-Versionen fraglich ist. Für ein einmaliges Projekt ist es eine funktionierende Lösung; für eine langfristig angelegte Website greifen Sie besser zu aktiv gepflegten Alternativen.
Video- und Parallax-Hintergründe für WPBakery
Wenn Sie WPBakery Page Builder (ehemals Visual Composer) nutzen, fügt das Addon Parallax & Video Background von MegaMain vollständige Videohintergründe und Parallax-Scrolling direkt in der Builder-Oberfläche hinzu. YouTube, Vimeo und hochgeladene MP4/WebM werden unterstützt, zusammen mit vier Parallax-Richtungen und der Möglichkeit, den Effekt auf Mobilgeräten zu deaktivieren.
Parallax-Scrolling bedeutet, dass sich das Hintergrundbild mit einer anderen Geschwindigkeit relativ zum Vordergrund bewegt. Das sieht beeindruckend aus, ruckelt aber auf Mobilgeräten oft, daher ist die Möglichkeit, den Effekt für Smartphones zu deaktivieren, hier entscheidend.
Das Addon funktioniert innerhalb von WPBakery: Sie fügen einer Zeile oder Spalte einfach einen Hintergrund über die vertraute Oberfläche hinzu, ohne separates Menü. Der Preis ist ein einmaliger Kauf auf CodeCanyon, und Updates werden regelmäßig veröffentlicht.
Ein kurzes Video zum Thema: Hinzufügen eines Hintergrundbildes zu einzelnen Seiten und Blöcken in WordPress. Es funktioniert als Ergänzung zu den oben beschriebenen Methoden, wobei der gesamte Prozess an einer echten Website gezeigt wird.
⁉️🤔 Häufig gestellte Fragen
Kann ich verschiedene Hintergründe für verschiedene Beitragskategorien festlegen?
Ja, wenn Ihr Theme über
post_class()in der Ausgabeschleife eine Kategorieklasse hinzufügt. Diese sieht normalerweise wie.category-newsoder.category-portfolioaus. Öffnen Sie den Quellcode der Kategorie-Archivseite und suchen Sie die Klasse im<article>-Tag. Dann ist es eine normale CSS-Regel in style.css. Alternativ: der konditionale Taghas_category()in einem PHP-Snippet.
Was tun, wenn die Funktion body_class() in header.php fehlt?
Fügen Sie sie manuell zum öffnenden
<body>-Tag hinzu: Ersetzen Sie<body>durch<body <?php body_class(); ?>>. Wenn header.php nicht zur Bearbeitung verfügbar ist (Theme ist gesperrt), erstellen Sie ein Child-Theme, kopieren Sie die header.php des Eltern-Themes und nehmen Sie die Bearbeitung in der Kopie vor.
Der Hintergrund wird nach dem Hinzufügen von CSS nicht angezeigt. Was ist der Grund?
Drei häufige Ursachen: (1) Browser-Cache, öffnen Sie die Seite im Inkognito-Modus; (2) ein anderer CSS-Selektor überschreibt Ihren Hintergrund, prüfen Sie in den Entwicklertools (F12), ob Ihre Regel durchgestrichen ist; (3) der Bildpfad ist falsch, verwenden Sie eine absolute URL vom Stammverzeichnis der Website mit einem führenden Schrägstrich.
Ist die Verwendung eines Child-Themes für Bearbeitungen an functions.php zwingend erforderlich?
Dringend empfohlen. Direkte Bearbeitungen an der
functions.phpdes Eltern-Themes gehen beim ersten Theme-Update verloren. Ein Child-Theme isoliert Ihre Änderungen: Erstellen Sie einen Ordner, fügen Sie einestyle.cssmit einem Header und einefunctions.phpmit Ihrem Code hinzu. Das dauert fünf Minuten und spart Stunden bei Updates.
Was kann WP-Backgrounds Lite heute ersetzen?
Für einfache Hintergründe deckt die CSS-Methode aus diesem Artikel die Funktionalität des eingestellten Plugins vollständig ab. Wenn Sie eine visuelle Oberfläche benötigen, verwenden Sie den Cover-Block in Gutenberg: Er liefert ein Hintergrundbild mit Text-Overlay für jede Seite oder jeden Beitrag. Für Parallax- und Videohintergründe nutzen Sie das WPBakery-Addon aus der obigen Betrachtung.
Fazit: Welche Methode Sie für Ihre Aufgabe wählen sollten
Die Wahl der Methode läuft auf zwei Fragen hinaus: Wie oft ändern Sie Hintergründe und wie vertraut ist Ihnen die Codebearbeitung.
- Wenn Sie etwas einmal einrichten und dann vergessen möchten, nutzen Sie CSS über
body_class(). Zwei Zeilen in style.css, null Plugins, funktioniert mit jedem Theme. - Wenn sich der Hintergrund regelmäßig für verschiedene Beiträge ändert, verwenden Sie ein PHP-Snippet mit einem benutzerdefinierten Feld. Bild in die Mediathek hochladen, URL ins Feld einfügen, fertig.
- Wenn Sie in WPBakery arbeiten und Videohintergründe benötigen, nutzen Sie das Parallax & Video Background-Addon.
- Wenn Sie überhaupt keinen Code anfassen möchten, deckt der integrierte Cover-Block in Gutenberg die meisten Hintergrundbild-Aufgaben ohne ein einziges Plugin ab.
Beginnen Sie mit CSS (das dauert fünf Minuten und birgt kein Risiko). Und wenn Sie eine nicht standardmäßige Technik für Hintergründe verwenden, die wir nicht behandelt haben, teilen Sie sie in den Kommentaren mit.
Ein professionelles Team von Autoren und Redakteuren, das auf die Erstellung hochwertiger Inhalte spezialisiert ist.