Parallax auf Mobilgeräten: Hintergrund anpassen und Scrollprobleme vermeiden
Wenn ein Parallax-Hintergrund auf dem Smartphone ruckelt oder falsch zugeschnitten wird, hilft zunächst eine verlässliche statische Mobilansicht.
Das Problem
Ein am Desktop fixierter Hintergrund wirkt auf dem Smartphone anders, bewegt sich ruckartig oder füllt den sichtbaren Bereich nicht wie erwartet. Mobile Browser behandeln Hintergrundfixierung und wechselnde Bildschirmhöhen unterschiedlich. Zusätzliche Theme-Skripte können den Effekt weiter verändern.
Das Vorgehen
1. Den verursachenden Effekt bestimmen
Prüfen Sie, ob background-attachment: fixed oder ein JavaScript-Effekt des Themes verwendet wird. Im WordPress-Seiteneditor kann der Effekt als Option an Abschnitt, Zeile oder Modul liegen. Schalten Sie ihn testweise genau an diesem Element aus und vergleichen Sie die Darstellung.
2. Das Hintergrundbild ohne Bewegung korrekt einstellen
Prüfen Sie zuerst den Zustand mit background-attachment: scroll. background-size: cover füllt die Fläche, kann aber Bildränder abschneiden. Legen Sie die wichtige Bildstelle über background-position fest. Bei Text über einem Bild müssen Kontrast und Textlänge auch auf einer schmalen Ansicht passen.
3. Kleine Ansichten und reduzierte Bewegung berücksichtigen
Das Beispiel schaltet die Fixierung für kleine Bildschirme und für Nutzer mit reduzierter Bewegung aus. Eine Media Query nach Breite allein erkennt kein bestimmtes Gerätemodell, ist für eine bewusst gewählte kleine Darstellung aber geeignet. Desktop und Mobilansicht dürfen unterschiedliche Bildausschnitte verwenden.
4. Theme-Effekte an derselben Stelle deaktivieren
Wenn das Theme einen eigenen JavaScript-Parallaxmodus betreibt, reicht eine Änderung von background-attachment nicht unbedingt aus. Deaktivieren Sie die Moduloption oder deren mobile Variante. Entfernen Sie nicht ungeprüft ganze Skriptdateien, die zugleich Navigation oder andere Elemente bereitstellen.
5. Auf einem echten Mobilgerät prüfen
Scrollen Sie durch den Abschnitt, drehen Sie das Gerät und öffnen Sie die Seite nach einem Neuladen. Prüfen Sie, ob Text erreichbar bleibt und die Bilddatei angemessen groß ist. Die abschließende Kontrolle sollte auch mit aktivierter Einstellung für reduzierte Bewegung erfolgen.
.hintergrund { background-size: cover; background-position: center; background-attachment: fixed; }
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
.hintergrund { background-attachment: scroll; }
}Die Lösung
Der Hintergrund bleibt auf kleinen Ansichten stabil und der Inhalt lesbar. Auf größeren Geräten kann der gewünschte Effekt erhalten bleiben. Eine statische Mobilansicht löst viele Darstellungsprobleme ohne eine zusätzliche Scrollberechnung bei jeder Bewegung.
Webentwicklung und Überarbeitung bestehender Seiten →
Haben Sie eine ähnliche Aufgabe?
Sie können mir die Ausgangslage per E-Mail beschreiben oder mich anrufen.