WordPress Hintergrund ändern: Farbe, Bild und einzelne Seiten anpassen

Du kannst den Hintergrund in WordPress je nach Theme auf unterschiedliche Weise ändern. Für klassische Themes nutzt Du meist den Customizer, für Block Themes den Site Editor. Für einzelne Seiten, Beiträge oder Kategorien ist CSS oft die flexibelste Lösung.

Welche Methode passt für welchen Hintergrund?

Ziel	Beste Methode	Geeignet für	Hinweis
Hintergrundfarbe ändern	Customizer oder Site Editor	klassische Themes und Block Themes	zuerst Theme prüfen
Hintergrundbild ändern	Site Editor, Customizer oder CSS	alle Themes	Bildgröße und Performance prüfen
Hintergrund pro Seite ändern	CSS oder Cover Block	einzelne Seiten und Beiträge	Body-Klasse vorher prüfen
Hintergrund für Kategorien ändern	CSS	Kategorie-Archive	Kategorie-Klassen gezielt ansprechen
Hintergrund in GeneratePress ändern	GeneratePress, GenerateBlocks oder CSS	GeneratePress-Setups	nur im passenden Theme-Kontext

Kennst Du den Unterschied zwischen klassischen und Block-Themes?

Worauf Du beim Hintergrund achten solltest

Ein Hintergrund sollte Inhalte lesbar halten und nicht von ihnen ablenken. Prüfe deshalb immer Kontrast, mobile Darstellung und Dateigröße, besonders bei Hintergrundbildern.

Hintergrund im klassischen Theme über den Customizer ändern

Der Customizer ist bei klassischen Themes meist der schnellste Weg, um Hintergrundfarbe oder Hintergrundbild zu ändern. Ob die Option vorhanden ist, hängt vom aktiven Theme ab.

Hintergrundfarbe ändern

1. Melde Dich in Deinem WordPress-Dashboard an
2. Gehe zu Design → Customizer
3. Klicke auf Farben oder bei manchen Themes: Hintergrund
4. Wähle Body oder Hintergrundfarbe
5. Nutze den Farbwähler oder gib einen Hex-Code ein, zum Beispiel #f5f5f5
6. Klicke auf Veröffentlichen

Texthintergrund in WordPress ändern

Wenn Du nicht den Hintergrund der ganzen Seite, sondern nur den Bereich hinter einem Text ändern willst, nutze die Farbeinstellungen des jeweiligen Blocks, einen Cover-Block oder eine eigene CSS-Klasse.

.text-hintergrund {
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 12px;
}

Hintergrundbild hinzufügen

1. Im Customizer: Klicke auf Hintergrundbild
2. Wähle Bild auswählen und lade ein Bild hoch
3. Stelle Position, Größe und Fixierung ein

• Position: Oben, Mitte, Unten
• Größe: Anpassen, Ausfüllen, Kacheln
• Fixiert: Bild scrollt mit oder bleibt fest

4. Klicke auf Veröffentlichen

Hintergrund im Site Editor ändern

Der Site Editor ist die passende Oberfläche für Block Themes. Du nutzt ihn vor allem dann, wenn Du Vorlagen, Template-Teile oder größere Seitenbereiche direkt im Editor gestalten möchtest.

Block Themes sind zum Beispiel Twenty Twenty-Two, Twenty Twenty-Three, Twenty Twenty-Four oder Twenty Twenty-Five. Entscheidend ist aber immer, welches Theme auf Deiner Website aktiv ist.

So fügst Du einen Hintergrund im Site Editor hinzu

1. Gehe zu Design → Editor
2. Wähle die Vorlage, die Du bearbeiten möchtest, zum Beispiel Startseite
3. Füge einen Cover-Block hinzu
4. Klicke auf Hochladen oder Mediathek und wähle Dein Bild
5. Verschiebe alle anderen Blöcke in den Cover-Block und nutze dafür die Listenansicht
6. Passe Overlay-Farbe, Transparenz und bei Bedarf weitere Optionen an:

• Duotone-Filter für passende Bildstimmungen
• Fixierter Hintergrund nur, wenn die Darstellung auf Mobilgeräten sauber bleibt

7. Klicke auf Speichern

Wann der Site Editor praktischer ist als der Customizer

Der Site Editor ist vor allem dann praktisch, wenn Du mit einem Block Theme arbeitest und größere Bereiche direkt im Editor gestalten möchtest. Für klassische Themes bleibt der Customizer oft der einfachere Weg.

Feature	Customizer	Site Editor
Duotone-Filter	❌	✅
Overlay mit Transparenz	Begrenzt	✅ Voll
Video-Hintergrund	❌	✅
Unterschiedliche Hintergründe pro Seite	❌	✅
Content-Positionierung	❌	✅

Kennst Du die Unterschiede zwischen den WordPress-Editoren?

Hintergrund in GeneratePress und GenerateBlocks ändern

Wenn Du GeneratePress mit GenerateBlocks nutzt, kannst Du Hintergründe direkt an Containern und einzelnen Bereichen setzen. Das ist hilfreich, wenn Dein Layout bereits mit GenerateBlocks aufgebaut ist.

Hintergrund in GenerateBlocks hinzufügen

1. Füge einen Container-Block von GenerateBlocks ein
2. Öffne die Block-Einstellungen → Styles → Backgrounds
3. Klicke auf Add New (+)
4. Wähle den Typ:

• Image: Bild aus Mediathek
• Gradient: Farbverlauf
• Overlay: Farbüberlagerung

5. Konfiguriere die Optionen:

• Position: center, top, bottom, etc.
• Size: cover, contain, auto
• Blend Mode: multiply, overlay, screen, etc.

6. Füge bei Bedarf weitere Layer hinzu

Besondere Features von GenerateBlocks

• Mehrere Layer stapeln: Bild + Gradient + Overlay kombinieren
• Blend Modes: gezielte visuelle Effekte für Hintergrundbilder und Overlays
• Responsive Einstellungen: Unterschiedliche Hintergründe für Desktop/Tablet/Mobile
• Inline Background Images: Dynamische Hintergründe mit CSS-Variablen

Mehr über GeneratePress erfahren.

Hintergrund mit CSS ändern

CSS ist die genaueste Lösung, wenn Du den Hintergrund global, pro Seite, pro Beitrag oder für einzelne Kategorie-Archive ändern möchtest. Die Methode funktioniert themeübergreifend, setzt aber einen passenden Selektor voraus.

Hintergrundfarbe per CSS ändern

1. Gehe zu Design → Customizer → Zusätzliches CSS
2. Füge diesen Code ein:

body {
    background-color: #f0f0f0;
}

3. Klicke auf Veröffentlichen

Hintergrundbild per CSS einfügen

body {
    background-image: url('https://deine-domain.de/wp-content/uploads/dein-bild.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

Hintergrund für einzelne Beiträge ändern

Jeder Beitrag hat eine eindeutige CSS-Klasse. So findest Du sie:

1. Öffne den Beitrag im Frontend
2. Rechtsklick → Element untersuchen
3. Suche im <body>-Tag nach postid-XXX (z.B. postid-123)

Dann im CSS:

.postid-123 {
    background-color: #1a1a2e;
}

Wenn Du statt einer Farbe ein Hintergrundbild für einen einzelnen Beitrag setzen möchtest, kannst Du die Beitragsklasse auch mit einem Hintergrundbild kombinieren:

body.postid-123 {
    background-image: url('https://deine-domain.de/wp-content/uploads/hintergrund.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

Hintergrund pro Seite ändern

Für Seiten nutzt Du page-id-XXX:

.page-id-456 {
    background-image: url('https://deine-domain.de/wp-content/uploads/seiten-hintergrund.jpg');
    background-size: cover;
}

Hintergrund für Kategorien ändern

Auch Kategorie-Archive können eigene Hintergründe bekommen. WordPress ergänzt im body-Tag passende Klassen, zum Beispiel nach Kategorie-Slug oder Kategorie-ID.

body.category-wordpress {
    background-color: #21759b;
}

/* Oder mit Kategorie-ID */
body.category-5 {
    background-image: url('https://deine-domain.de/wp-content/uploads/kategorie-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

Ersetze category-wordpress oder category-5 durch die Klasse, die Du im body-Tag Deines Kategorie-Archivs findest.

Hintergrund mit Plugin ändern

Ein Plugin ist nur dann sinnvoll, wenn Customizer, Site Editor, GenerateBlocks oder CSS nicht ausreichen. Für einfache Hintergrundfarben oder ein einzelnes Hintergrundbild brauchst Du normalerweise kein zusätzliches Plugin.

Advanced WordPress Backgrounds

Das Plugin kann sinnvoll sein, wenn Du spezielle Hintergrundfunktionen brauchst, zum Beispiel Overlays, Parallax oder Video-Hintergründe. Prüfe vor der Nutzung, ob das Plugin zu Deinem Setup passt.

Dieses Plugin fügt einen eigenen Gutenberg-Block hinzu mit:

• Parallax-Effekte
• YouTube/Vimeo Video-Hintergründe
• Bild-Hintergründe mit Overlay
• Mobile-Optimierung (Parallax auf Handys deaktivierbar)

Installation:

1. Gehe zu Plugins → Installieren
2. Suche nach “Advanced WordPress Backgrounds“
3. Installieren und aktivieren
4. Im Editor: Füge den AWB-Block hinzu

Elementor: Hintergrundfarbe und Hintergrundbild ändern

Wenn Du mit Elementor arbeitest, bearbeitest Du zuerst den Container oder Abschnitt, dessen Hintergrund sich ändern soll. Öffne im Elementor Editor den Tab Stil und wähle unter Hintergrund den Typ Klassisch. Dort legst Du über das Farbfeld eine Hintergrundfarbe fest oder wählst unter Bild eine Datei aus. Prüfe anschließend die Darstellung für Desktop, Tablet und Mobilgeräte.

Wenn Du Elementor bereits nutzt, kannst Du Hintergründe direkt im Elementor-Editor setzen. Nur für ein Hintergrundbild solltest Du Elementor aber nicht zusätzlich installieren.

1. Öffne einen Beitrag mit Elementor
2. Klicke auf das Zahnrad-Icon → Einstellungen → Stil
3. Wähle Background Type → Classic
4. Lade Dein Hintergrundbild hoch

Performance-Tipps für Hintergrundbilder

Große Hintergrundbilder können Deine Website verlangsamen. CSS-Hintergrundbilder werden anders behandelt als normale img-Bilder. Wenn ein großer Hintergrund im sichtbaren Bereich liegt, kann er den LCP-Wert beeinflussen.

Gerade große Hero-Hintergründe solltest Du deshalb wie ein Performance-relevantes Element behandeln und nicht nur als Dekoration sehen.

1. Bildformat optimieren

Format	Vorteile	Empfehlung
WebP	30-50% kleiner als JPEG	✅ Beste Wahl
JPEG	Gute Kompression für Fotos	✅ Fallback
PNG	Transparenz möglich	Nur wenn nötig
AVIF	Noch kleiner als WebP	Noch nicht überall unterstützt

2. Bildgröße anpassen

• Full HD (1920×1080) reicht für die meisten Hintergründe
• 4K nur wenn wirklich nötig (große Dateigröße!)
• Nutze Tools wie Squoosh, ShortPixel oder Smush

3. Ladeverhalten realistisch einschätzen

Für CSS-Hintergrundbilder gibt es keine pauschale WordPress-Standardfunktion, die sie wie normale Bilder behandelt. Wenn ein Hintergrundbild im sichtbaren Bereich groß ist, solltest Du seine Auswirkung auf Ladezeit und LCP in WordPress bewusst prüfen.

4. Parallax auf Mobile deaktivieren

Parallax-Effekte und background-attachment: fixed sind auf Mobile oft unnötig und können die Darstellung verschlechtern. Auf kleinen Bildschirmen ist scroll meist die bessere Wahl.

@media (max-width: 768px) {
    body {
        background-attachment: scroll !important;
    }
}

Mehr Performance-Tipps für WordPress.

FAQ

Fazit

Die passende Methode hängt von Deinem Theme und Deinem Ziel ab. Bei klassischen Themes startest Du meist im Customizer. Bei Block Themes ist der Site Editor naheliegend. Wenn Du einzelne Seiten, Beiträge oder Kategorien anpassen möchtest, ist CSS oft die genaueste Lösung.

• Klassisches Theme: Customizer
• Block Theme: Site Editor
• GeneratePress: GenerateBlocks oder CSS
• Gezielte Anpassung: CSS
• Spezialfall: Plugin nur bei Bedarf

Deine nächsten Schritte

1. ✅ Prüfe, welches Theme Du verwendest (klassisch oder Block-Theme)
2. ✅ Wähle die passende Methode aus diesem Guide
3. ✅ Optimiere Dein Hintergrundbild für Performance
4. ✅ Teste auf verschiedenen Geräten (Desktop, Tablet, Mobile)

Wenn Du unsicher bist, beginne mit der Methode, die zu Deinem Theme passt, und prüfe die Änderung anschließend in der Desktop- und Mobilansicht.