Ein einzelnes Hintergrundbild lässt sich in GenerateBlocks problemlos setzen. Spannender wird es, wenn in demselben Container drei Bilder automatisch wechseln sollen – weich einblenden, kurz sichtbar bleiben, wieder ausblenden und dann zum nächsten Motiv wechseln. Genau dieser Effekt wurde im ursprünglichen Arbeitsverlauf Schritt für Schritt entwickelt: zunächst drei Bilder, dann weichere Übergänge, kürzere Schwarzphasen, Zoom, seitliche Bewegung und schließlich eine stärkere Abdunklung für weißen Text.
Die wichtigste technische Erkenntnis: CSS kann background-image nicht weich von Bild A nach Bild B interpolieren. Ein Hintergrundbild wechselt diskret. Für einen sauberen Effekt blendet man deshalb die sichtbare Ebene aus, tauscht das Bild während der unsichtbaren Phase und blendet sie wieder ein.
Geht das ganz ohne Code direkt in GenerateBlocks?
Für einen normalen statischen Container-Hintergrund: ja. Für eine echte automatisch wechselnde Hintergrund-Slideshow mit drei Motiven, individuellen Übergängen und Bewegungen reicht die normale Hintergrundbild-Einstellung von GenerateBlocks jedoch nicht aus. Dafür brauchst du entweder CSS/JavaScript oder einen Slider-/Hero-Block, der diese Funktion ausdrücklich anbietet.
Wenn du den Container bereits mit GenerateBlocks aufgebaut hast und nur die Hintergrundebene wechseln möchtest, ist CSS eine schlanke Lösung.
Die einfache Architektur
Der GenerateBlocks-Container bekommt die Klasse:
background-slideshowDas eigentliche Hintergrundbild wird nicht mehr direkt im Block gesetzt. Stattdessen übernimmt ein Pseudo-Element die komplette Slideshow. Dadurch bleiben Text, Buttons und andere Inhalte unangetastet.
Grund-CSS für den Container
.background-slideshow {
position: relative;
overflow: hidden;
background: #111;
min-height: 480px;
}
.background-slideshow::before {
content: "";
position: absolute;
inset: -4%;
z-index: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
animation: background-cycle 27s ease-in-out infinite;
}
.background-slideshow > * {
position: relative;
z-index: 2;
}Die negative Einrückung von vier Prozent gibt der Bildfläche Reserve für Zoom und Bewegung. Dadurch werden beim Verschieben keine leeren Ränder sichtbar.
Drei Bilder in einer Animation wechseln
Die Bild-URLs werden direkt in den Keyframes gewechselt. Wichtig ist, dass der Wechsel in einem Moment stattfindet, in dem die Ebene transparent ist.
@keyframes background-cycle {
0% {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20%20%22%3E%3C/svg%3E#}/wp-content/uploads/bild-1.jpg');
opacity: 0;
transform: scale(1.02) translateX(2%);
}
6% {
opacity: .60;
}
26% {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20%20%22%3E%3C/svg%3E#}/wp-content/uploads/bild-1.jpg');
opacity: .60;
transform: scale(1.10) translateX(-2%);
}
31% {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20%20%22%3E%3C/svg%3E#}/wp-content/uploads/bild-1.jpg');
opacity: 0;
}
33% {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20%20%22%3E%3C/svg%3E#}/wp-content/uploads/bild-2.jpg');
opacity: 0;
transform: scale(1.02) translateX(-2%);
}
39% {
opacity: .60;
}
59% {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20%20%22%3E%3C/svg%3E#}/wp-content/uploads/bild-2.jpg');
opacity: .60;
transform: scale(1.10) translateX(2%);
}
64% {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20%20%22%3E%3C/svg%3E#}/wp-content/uploads/bild-2.jpg');
opacity: 0;
}
66% {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20%20%22%3E%3C/svg%3E#}/wp-content/uploads/bild-3.jpg');
opacity: 0;
transform: scale(1.02) translateY(2%);
}
72% {
opacity: .60;
}
92% {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20%20%22%3E%3C/svg%3E#}/wp-content/uploads/bild-3.jpg');
opacity: .60;
transform: scale(1.10) translateY(-2%);
}
97% {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20%20%22%3E%3C/svg%3E#}/wp-content/uploads/bild-3.jpg');
opacity: 0;
}
100% {
background-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20%20%22%3E%3C/svg%3E#}/wp-content/uploads/bild-1.jpg');
opacity: 0;
transform: scale(1.02) translateX(2%);
}
}Warum die Deckkraft nur bis 60 Prozent geht
Im ursprünglichen Verlauf war das Bild bei 80 Prozent noch zu hell, weil weiße Schrift darüber weniger gut lesbar war. Deshalb wurde die maximale Bilddeckkraft auf etwa 60 Prozent reduziert. Das ist eine praktische Methode, wenn der Container darunter dunkel ist.
Alternativ kann das Bild auf voller Deckkraft bleiben und ein separates Overlay darübergelegt werden. Diese Variante gibt mehr Kontrolle.
Besser: Bild und Abdunklung getrennt steuern
Für eine professionelle Lösung sollte die Bilddeckkraft nicht allein für die Lesbarkeit verantwortlich sein. Lege zusätzlich ein zweites Pseudo-Element darüber:
.background-slideshow::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(ellipse at center, rgba(0,0,0,.05) 0%, rgba(0,0,0,.45) 72%, rgba(0,0,0,.72) 100%),
linear-gradient(to bottom, rgba(0,0,0,.20), rgba(0,0,0,.48));
}Dann kannst du die Bild-Ebene beispielsweise mit 100 Prozent Deckkraft animieren und die Abdunklung unabhängig davon steuern.
Warum frühere Versuche oft nur das erste Bild zeigten
Wenn drei Bilder mit mehreren Pseudo-Elementen aufgebaut werden sollen, stößt man schnell an eine Grenze: Ein Element besitzt nur ::before und ::after. Für drei unabhängige Bildlayer müsste zusätzlich echtes HTML erzeugt werden.
Der Ansatz mit einem einzigen Pseudo-Element und diskretem Bildwechsel während der transparenten Phase umgeht dieses Problem. Dadurch braucht der Container kein zusätzliches HTML.
Warum echtes Crossfading mit reinem background-image nicht funktioniert
CSS kann Farben und Deckkraft interpolieren, aber nicht zwei Bilddateien ineinander morphieren. Wenn du zwei Bilder wirklich gleichzeitig sichtbar haben und direkt überblenden möchtest, brauchst du zwei separate Ebenen. Für drei Bilder wären drei Ebenen nötig – also zusätzliche Elemente oder JavaScript.
Die hier gezeigte Methode erzeugt stattdessen einen sehr ähnlichen visuellen Eindruck: Bild A blendet aus, im unsichtbaren Zustand wechselt der Hintergrund, Bild B blendet ein.
Schwarzzeit zwischen Bildern fast eliminieren
Die Dauer zwischen opacity: 0 am Ende eines Bildes und dem Beginn des nächsten bestimmt die schwarze Pause. Wenn sie zu lang wirkt, verkleinere den Abstand zwischen den Prozentwerten.
Beispielsweise:
- Bild 1 endet bei 31 Prozent.
- Bild 2 startet bei 33 Prozent.
Bei 27 Sekunden Gesamtdauer entspricht das nur einem sehr kurzen Übergang.
Langsamer einblenden, etwas schneller ausblenden
Im ursprünglichen Verlauf wurde genau dieses Timing mehrfach feinjustiert. Du steuerst es über die Keyframe-Abstände. Ein Einblenden von 33 auf 39 Prozent dauert länger als ein Ausblenden von 59 auf 64 Prozent.
So lässt sich ein ruhigerer Beginn und ein etwas zügigerer Wechsel erzeugen, ohne hektisch zu wirken.
Zoom während des Einblendens
Der Zoom entsteht durch eine langsame Veränderung von scale():
transform: scale(1.02);bis:
transform: scale(1.10);Mehr als etwa 10 bis 12 Prozent wirkt bei einem ruhigen Hero schnell zu stark.
Unterschiedliche Bewegungsrichtungen
Der ursprüngliche Effekt sollte pro Motiv anders laufen:
- Bild 1: von rechts nach links
- Bild 2: von links nach rechts
- Bild 3: von unten nach oben
Das lässt sich innerhalb derselben Keyframe-Animation über unterschiedliche translateX()– beziehungsweise translateY()-Werte erreichen.
Raster oder Struktur über alle Bilder legen
Wenn alle Bilder dieselbe feine Struktur erhalten sollen, gehört diese nicht in jedes Bild-Keyframe, sondern in das statische Overlay:
.background-slideshow::after {
background:
repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0, rgba(255,255,255,.015) 1px, transparent 1px, transparent 20px),
repeating-linear-gradient(0deg, rgba(255,255,255,.010) 0, rgba(255,255,255,.010) 1px, transparent 1px, transparent 20px),
rgba(0,0,0,.35);
}So bleibt das Raster bei jedem Bild identisch und flackert nicht mit.
Text verschwindet? Z-Index prüfen
Im ursprünglichen Experiment verschwand zeitweise der Text im Container. Das passiert, wenn die animierten Ebenen über dem Inhalt liegen.
Die Ebenen sollten klar sortiert sein:
- Bild: z-index 0
- Overlay: z-index 1
- Text und Buttons: z-index 2
Hintergrundbilder vorladen
Beim ersten Durchlauf kann Bild 2 oder 3 kurz verzögert erscheinen, wenn die Datei noch nicht im Browsercache liegt. Bei wichtigen Hero-Slideshows lohnt es sich, die Bildgrößen klein zu halten und gegebenenfalls ein gezieltes Preloading zu verwenden.
Einfach drei riesige 4-MB-Dateien zu hinterlegen wäre trotz schöner Animation eine schlechte Idee.
Mobil andere Bildpositionen verwenden
Mit background-size: cover wird auf schmalen Displays viel vom Querformat abgeschnitten. Wenn die Motive unterschiedliche Hauptobjekte besitzen, ist eine einzige Position für alle drei Bilder ein Kompromiss.
Bei einem CSS-only-Wechsel mit einem Pseudo-Element ist eine individuelle Position pro Bild technisch möglich, indem sie in den entsprechenden Keyframes ebenfalls gesetzt wird. Noch sauberer ist eine separate HTML-/JavaScript-Sliderlösung, wenn jedes Bild individuell stark angepasst werden muss.
Bewegung für sensible Nutzer reduzieren
@media (prefers-reduced-motion: reduce) {
.background-slideshow::before {
animation: none;
background-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20%20%22%3E%3C/svg%3E#}/wp-content/uploads/bild-1.jpg');
opacity: 1;
transform: none;
}
}Besucher, die im Betriebssystem reduzierte Bewegung aktiviert haben, sehen dann ein stabiles Hintergrundbild.
Wann JavaScript oder ein Slider-Block die bessere Lösung ist
Reines CSS ist hervorragend, wenn drei fest definierte Bilder dekorativ wechseln sollen. Eine echte Slider-Komponente ist sinnvoller, wenn du:
- jedes Bild separat im Editor pflegen möchtest,
- unterschiedliche Overlays oder Positionen brauchst,
- echtes Crossfading zwischen gleichzeitig sichtbaren Ebenen möchtest,
- Pause/Play-Steuerung anbieten willst,
- viele Bilder oder dynamische Inhalte verwendest.
Fazit
Drei automatisch wechselnde Hintergrundbilder lassen sich auch ohne Slider-Plugin in einem GenerateBlocks-Container umsetzen. Die robusteste CSS-only-Variante verwendet ein einziges Pseudo-Element, blendet es zwischen den Motiven kurz aus und wechselt das background-image nur in dieser unsichtbaren Phase. Zoom, Bewegung, Dunkelheit und Raster lassen sich zusätzlich animieren beziehungsweise über ein statisches Overlay steuern. Für ein echtes Crossfade mit drei gleichzeitig kontrollierbaren Ebenen ist dagegen eine Slider- oder JavaScript-Lösung sauberer.