Ein großes Hintergrundbild kann einen Hero- oder Teaserbereich stark aufwerten – vorausgesetzt, Text und Buttons bleiben lesbar. In der Praxis reicht es deshalb selten, nur ein Bild als Container-Hintergrund zu setzen. Häufig soll das Motiv leicht abgedunkelt werden, an den Rändern in eine dunkle Fläche auslaufen, nach unten weich verschwinden und sich zusätzlich sehr dezent bewegen.
Genau dafür ist eine Kombination aus Pseudo-Elementen, Farbverläufen und einer langsamen CSS-Animation ideal. Der entscheidende Vorteil: Das Bild, der dunkle Overlay und der eigentliche Inhalt bleiben technisch getrennt. Dadurch lässt sich jeder Teil unabhängig steuern.
Die saubere Struktur
Für einen GenerateBlocks-Container vergeben wir beispielsweise die CSS-Klasse hero-background. Die Klasse wird im Block-Editor ohne Punkt eingetragen.
Der Container selbst übernimmt nur Positionierung und Begrenzung. Das Hintergrundbild liegt auf ::before, der dunkle Verlauf auf ::after. Text und Buttons liegen darüber.
.hero-background {
position: relative;
overflow: hidden;
background: #1a1a1a;
}
.hero-background::before,
.hero-background::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.hero-background::before {
background-image: url('/wp-content/uploads/dein-bild.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 0;
}
.hero-background::after {
z-index: 1;
}
.hero-background > * {
position: relative;
z-index: 2;
}Damit ist das Grundproblem gelöst, das in längeren Tests häufig auftritt: Bild- oder Overlay-Layer dürfen den Text nicht überdecken.
Warum Pseudo-Elemente besser sind als alles in eine Background-Zeile zu packen
CSS erlaubt zwar mehrere Hintergründe in einer einzigen background-Definition. Für komplexere Effekte wird die Regel aber schnell unübersichtlich. Getrennte Ebenen sind leichter zu verstehen:
- Container: Größe, Position und Fallback-Farbe
- ::before: Bild und Bewegung
- ::after: Abdunklung, Vignette und Raster
- Inhalt: Text, Buttons, Icons
Bild insgesamt etwas dunkler machen
Eine einfache dunkle Ebene lässt sich mit einem halbtransparenten Schwarz erzeugen:
.hero-background::after {
background: rgba(0, 0, 0, 0.35);
}Je höher der letzte Wert, desto stärker die Abdunklung. Werte zwischen etwa 0,25 und 0,55 sind für Hero-Bereiche oft ein guter Ausgangspunkt.
Nach unten weich in Schwarz auslaufen
Wenn das Bild nach unten in den nächsten dunklen Abschnitt übergehen soll, eignet sich ein linearer Verlauf:
.hero-background::after {
background: linear-gradient(
to bottom,
rgba(0,0,0,0.15) 0%,
rgba(0,0,0,0.35) 55%,
rgba(0,0,0,0.85) 85%,
#1a1a1a 100%
);
}Der Verlauf beginnt hier erst in der unteren Hälfte deutlich stärker zu werden. Dadurch bleibt das Motiv in der Mitte sichtbar, während der Übergang zum nächsten Abschnitt weich wirkt.
Ränder und oberen Bereich stärker abdunkeln
Für die gewünschte Vignette – Mitte heller, Außenbereiche dunkel – ist ein radialer Verlauf sinnvoll:
radial-gradient(
ellipse at 50% 45%,
rgba(26,26,26,0.00) 0%,
rgba(26,26,26,0.12) 38%,
rgba(26,26,26,0.55) 72%,
#1a1a1a 100%
)Die Position 50% 45% legt das helle Zentrum leicht oberhalb der geometrischen Mitte. Das ist bei Hero-Bildern oft angenehmer, kann aber je nach Motiv verändert werden.
Vignette und unteren Verlauf kombinieren
Mehrere Verläufe können übereinandergelegt werden:
.hero-background::after {
background:
radial-gradient(
ellipse at 50% 45%,
rgba(26,26,26,0.00) 0%,
rgba(26,26,26,0.10) 38%,
rgba(26,26,26,0.55) 72%,
#1a1a1a 100%
),
linear-gradient(
to bottom,
rgba(0,0,0,0.25) 0%,
rgba(0,0,0,0.10) 45%,
rgba(0,0,0,0.35) 70%,
#1a1a1a 100%
);
}Die Reihenfolge ist wichtig: Der zuerst notierte Verlauf liegt oben.
Ein sehr dezentes Raster über das Bild legen
Im ursprünglichen Arbeitsverlauf kam zusätzlich der Wunsch nach einer fast unsichtbaren Struktur auf. Das lässt sich mit repeating-linear-gradient umsetzen.
.hero-background::after {
background:
repeating-linear-gradient(
90deg,
rgba(255,255,255,0.018) 0,
rgba(255,255,255,0.018) 1px,
transparent 1px,
transparent 18px
),
repeating-linear-gradient(
0deg,
rgba(255,255,255,0.012) 0,
rgba(255,255,255,0.012) 1px,
transparent 1px,
transparent 18px
),
radial-gradient(ellipse at 50% 45%, rgba(26,26,26,0) 0%, rgba(26,26,26,.55) 72%, #1a1a1a 100%),
linear-gradient(to bottom, rgba(0,0,0,.2) 0%, rgba(0,0,0,.1) 50%, #1a1a1a 100%);
}Bei solchen Strukturen ist Zurückhaltung wichtig. Ein Raster, das man sofort als Raster wahrnimmt, lenkt meist vom eigentlichen Motiv und vom Text ab.
Langsame Zoom-Bewegung ohne sichtbaren Sprung
Eine frühe Variante des Effekts zoomte das Bild auf und sprang anschließend abrupt zur Ausgangsgröße zurück. Eleganter ist eine Animation mit alternate: Der Browser spielt sie vorwärts und danach rückwärts.
.hero-background::before {
inset: -4%;
background-image: url('/wp-content/uploads/dein-bild.jpg');
background-size: cover;
background-position: center;
animation: hero-ken-burns 18s ease-in-out infinite alternate;
}
@keyframes hero-ken-burns {
from {
transform: scale(1.02) translateX(1%);
}
to {
transform: scale(1.10) translateX(-1.5%);
}
}Das negative inset gibt dem Bild etwas Überstand. Dadurch entstehen an den Rändern keine leeren Streifen, wenn das Bild bewegt oder skaliert wird.
Wird das Bild am Ende der Animation wirklich neu geladen?
Nein. Das ist eine wichtige Korrektur zu einer typischen Formulierung: Eine CSS-Animation lädt die Bilddatei nicht bei jedem Durchlauf neu vom Server. Der Browser behält das Bild im Cache und setzt lediglich Transformation, Position oder Deckkraft zurück.
Das ist sogar besser, weil ein echtes erneutes Laden unnötigen Netzwerkverkehr und sichtbares Flackern verursachen würde.
Ein- und Ausblenden zusätzlich zum Zoom
Wenn du bewusst einen kurzen Fade-Effekt möchtest, kannst du die Deckkraft mit animieren. Dabei sollte der Übergang möglichst weich bleiben:
@keyframes hero-fade-zoom {
0% {
opacity: .65;
transform: scale(1.02);
}
15% {
opacity: 1;
}
85% {
opacity: 1;
transform: scale(1.09);
}
100% {
opacity: .65;
transform: scale(1.02);
}
}Für einen einzelnen Hero ist der kontinuierliche Hin-und-zurück-Zoom aber meist ruhiger als ein vollständiges Ausblenden.
Seitliche Bewegung hinzufügen
Eine minimale horizontale Bewegung erzeugt den sogenannten Ken-Burns-Effekt. Wichtig ist, wirklich nur wenige Prozent zu verschieben. Große Bewegungen wirken schnell wie ein Slider und können Textbereiche unruhig machen.
Beispiel:
transform: scale(1.08) translateX(-2%);Text muss eine eigene Ebene behalten
Wenn nach einer CSS-Erweiterung plötzlich Text verschwindet, liegt es fast immer am Stacking-Kontext beziehungsweise an z-index. Eine robuste Regel ist:
.hero-background > * {
position: relative;
z-index: 2;
}Bild liegt auf 0, Overlay auf 1, Inhalt auf 2.
Lesbarkeit nicht nur über Dunkelheit lösen
Ein Overlay sollte den Kontrast verbessern, aber ein sehr helles oder detailreiches Motiv kann trotzdem störend sein. Zusätzlich helfen:
- Text in einen ruhigeren Bildbereich setzen
background-positionanpassen- maximale Textbreite begrenzen
- dezenten Textschatten nur bei Bedarf verwenden
- einen lokalen Verlauf hinter dem Text nutzen
Mobil kann ein anderer Bildausschnitt nötig sein
background-size: cover schneidet ein Querformat auf einem schmalen Smartphone stark ab. Deshalb lohnt sich eine eigene Position:
@media (max-width: 768px) {
.hero-background::before {
background-position: 60% center;
}
}So kann ein Gesicht oder Hauptmotiv auf Mobilgeräten im sichtbaren Bereich bleiben.
Animation für Nutzer mit reduzierter Bewegung abschalten
Bewegte Hintergründe sind nicht für alle Besucher angenehm. Browser und Betriebssystem können die Präferenz prefers-reduced-motion bereitstellen. Darauf sollte die Website reagieren:
@media (prefers-reduced-motion: reduce) {
.hero-background::before {
animation: none;
transform: none;
}
}Der Bereich bleibt dann optisch vollständig erhalten, nur die Bewegung entfällt.
Performance: Bilddatei wichtiger als die Animation
Ein Hero-Hintergrund ist häufig eines der größten Elemente auf der Seite. Deshalb sollte das Bild passend dimensioniert und komprimiert sein. Ein 6000-Pixel-Foto mit mehreren Megabyte ist für einen Website-Hero unnötig groß.
Für viele Desktop-Heros reicht eine sinnvoll komprimierte Bildbreite von ungefähr 1600 bis 2200 Pixeln. Moderne Formate wie WebP oder AVIF können die Dateigröße deutlich reduzieren.
Komplette, robuste Grundversion
.hero-background {
position: relative;
overflow: hidden;
background: #1a1a1a;
}
.hero-background::before,
.hero-background::after {
content: "";
position: absolute;
pointer-events: none;
}
.hero-background::before {
inset: -4%;
background: url('/wp-content/uploads/dein-bild.jpg') center / cover no-repeat;
z-index: 0;
animation: hero-ken-burns 18s ease-in-out infinite alternate;
}
.hero-background::after {
inset: 0;
z-index: 1;
background:
radial-gradient(ellipse at 50% 45%, rgba(26,26,26,0) 0%, rgba(26,26,26,.15) 40%, rgba(26,26,26,.6) 75%, #1a1a1a 100%),
linear-gradient(to bottom, rgba(0,0,0,.22) 0%, rgba(0,0,0,.08) 45%, rgba(0,0,0,.45) 75%, #1a1a1a 100%);
}
.hero-background > * {
position: relative;
z-index: 2;
}
@keyframes hero-ken-burns {
from { transform: scale(1.02) translateX(1%); }
to { transform: scale(1.10) translateX(-1.5%); }
}
@media (prefers-reduced-motion: reduce) {
.hero-background::before {
animation: none;
transform: none;
}
}Fazit
Für ein bewegtes GeneratePress-/GenerateBlocks-Hintergrundbild ist eine klare Trennung der Ebenen entscheidend. Das Bild gehört auf ein Pseudo-Element, die Abdunklung auf ein zweites und der eigentliche Inhalt darüber. Vignette, unterer Verlauf und ein fast unsichtbares Raster können kombiniert werden. Die Bewegung sollte langsam bleiben, ohne harte Sprünge laufen und bei prefers-reduced-motion deaktiviert werden. So entsteht ein hochwertiger Effekt, ohne Lesbarkeit oder Bedienbarkeit zu opfern.