Ein Parallax-Hintergrund gibt einer Seite Tiefe: Beim Scrollen bewegt sich das Hintergrundbild einer Sektion anders als der Text davor. Das wirkt lebendig, ohne dass du Animationen programmieren musst. In Divi 5 ist das ein einziger Schalter, den man allerdings erst einmal finden muss.
Ich zeige dir, wo er sitzt, was die beiden Parallax-Methoden unterscheiden und worauf du achten solltest, damit der Effekt auch zu sehen ist. Getestet mit Divi 5.13 (deutsche Oberfläche), Stand Oktober 2026.
Was ist ein Parallax-Hintergrund?
Bei einem normalen Hintergrundbild scrollt das Bild exakt mit dem Rest der Seite mit. Bei Parallax bewegt es sich langsamer oder bleibt sogar stehen, während Text und Module darüber vorbeiziehen. Die Sektion verhält sich dann wie ein Fenster, durch das du aufs Bild schaust.
Schritt 1: Die Sektion einstellen
Öffne die Seite im Visual Builder und fahre mit der Maus auf die Sektion, die das Bild bekommen soll. In der Leiste, die dabei erscheint, klickst du auf das Zahnrad. Rechts öffnet sich das Einstellungsfeld mit dem Titel „Sektion“ und den Reitern „Inhalt“, „Design“ und „Erweitert“.
Vorher: Die mittlere Sektion soll ein Hintergrundbild mit Parallax-Effekt bekommen.Damit der Effekt später sichtbar ist, braucht die Sektion Höhe. Innenabstand oben und unten stellst du im Reiter „Design“ unter „Zwischenraum“ ein, ich habe 180 Pixel genommen. Auf einer Sektion mit nur einer Zeile Text wäre vom Bild kaum etwas zu sehen.
Schritt 2: Das Hintergrundbild wählen
Hier liegt die erste Stolperfalle: Anders als in Divi 4 findest du den Hintergrund nicht im Reiter „Design“, sondern im Reiter „Inhalt“. Klapp dort die Gruppe „Hintergrund“ auf. Darunter siehst du sechs Symbole nebeneinander, jedes für eine Hintergrundart. Das dritte, das mit dem Bildsymbol, trägt den Hinweis „Hintergrundbild“. Klick darauf.
Gruppe „Hintergrund“ im Reiter „Inhalt“, dritter Reiter: Hintergrundbild.Mit „+ Hintergrundbild“ öffnest du den Dialog „Bild auswählen“. Er hat zwei Reiter: „Dateien hochladen“ und „Mediathek“. Wähle ein Bild aus der Mediathek oder lade ein neues hoch. Zum Bestätigen klickst du unten rechts auf den Knopf, der sich „Ein Bild hochladen“ nennt, auch wenn du nur ein vorhandenes Bild übernimmst. Die Beschriftung ist etwas irreführend, aber der richtige Knopf.
Bild in der Mediathek anklicken, dann unten rechts bestätigen.Meine Empfehlung zur Bildwahl: Nimm ein Bild, das mindestens so breit wie ein großer Bildschirm ist und deutlich höher als deine Sektion. Bei Parallax wird immer nur ein Ausschnitt gezeigt, ein zu kleines Bild wird sonst stark vergrößert und wirkt unscharf. Größere Bilder verlängern allerdings die Ladezeit, also exportiere sie komprimiert.
Schritt 3: Parallax einschalten
Direkt unter der Bildvorschau steht der Schalter „Parallaxen-Effekt Benutzen“. Er ist standardmäßig aus. Schalte ihn ein. Dann tauschen sich die beiden Felder darunter aus: Statt „Hintergrundbild Größe“ und „Hintergrundbildposition“ erscheinen „Parallaxen-Methode“ und „Überblendmodus“.
Eingeschalteter Schalter mit der Methode „Echte Parallaxe“.Beachte den Nebeneffekt: Solange Parallax aktiv ist, kannst du „Hintergrundbild Größe“ und „Hintergrundbildposition“ nicht einstellen. Wer das Bild exakt platzieren will, muss Parallax ausgeschaltet lassen.
Echte Parallaxe oder CSS (Standbild)?
Die Methode ist ein Dropdown mit zwei Werten:
- „Echte Parallaxe“ ist der Standard. Das Bild scrollt langsamer als der Inhalt. Auf der Live-Seite sieht man das gut an der Sonne im Beispielbild: Sie liegt im ersten Screenshot knapp unter dem Text und ist im zweiten nach oben aus dem Abschnitt gewandert, aber deutlich weniger weit als die Zeilen darüber.
- „CSS (Standbild)“ hält das Bild im Fenster fest. Beim Scrollen verschiebt sich nur der Ausschnitt, den die Sektion freigibt. Die Sonne bleibt in beiden Screenshots auf derselben Höhe des Bildschirms.
„Echte Parallaxe“, Scrollposition A.
„Echte Parallaxe“, weiter gescrollt: Das Bild wandert langsamer als der Text.
„CSS (Standbild)“, Scrollposition A.
„CSS (Standbild)“, weiter gescrollt: Das Bild steht im Fenster still.Welche Methode ich nehme? Für einen sanften, ruhigen Effekt „Echte Parallaxe“. „CSS (Standbild)“ ist der härtere, klassische Look mit stehendem Bild und eignet sich für Fotos, bei denen das Motiv wirken soll.
Speichern und prüfen
Klick oben rechts auf „Speichern“ und öffne danach die Live-Seite. Den Effekt erkennst du erst beim Scrollen. Wichtig dafür: Die Seite muss lang genug sein. Bei meiner Testseite sah ich anfangs fast nichts, weil unter der Sektion zu wenig Inhalt stand und die Seite am Ende nicht weiter scrollen konnte. Ich habe darum Platz unter dem Abschnitt gelassen.
Tipps für die Praxis
- Lege Text mit ausreichend Kontrast über das Bild, oder wähle ein Bild, das hinter dem Text ruhig ist.
- Setz Parallax sparsam ein. Ein bis zwei Abschnitte pro Seite reichen, mehr lenkt vom Inhalt ab.
- Prüfe die Seite auf dem Handy. Parallax lebt vom Scrollen, und kleine Bildschirme zeigen ohnehin nur einen kleinen Ausschnitt.
Divi gibt es bei Elegant Themes (Werbung).
