Fix für fixierte Hintergründe auf iOS-Geräten in WordPress

von | Jan. 6, 2025 | Allgemein

Du möchtest in deinem WordPress-Design einen fixierten Hintergrund verwenden, aber auf iOS-Geräten kommt es zu Problemen? Du bist nicht allein! Viele WordPress-Nutzer kennen das leidige Problem: Der Effekt von background-attachment: fixed; funktioniert auf iPhones und iPads nicht wie gewünscht. Statt eines stilvollen, fixierten Hintergrunds gibt es nur Frust durch springende oder falsch angezeigte Hintergründe.

Zum Glück gibt es eine clevere Lösung, die dieses Problem behebt – und das mit nur wenigen Zeilen CSS!

Das Problem:

Apple hat schon seit Jahren Schwierigkeiten, background-attachment: fixed; korrekt umzusetzen, besonders in Safari und WebKit-basierten Browsern auf mobilen Geräten. Der Grund dafür liegt im Rendering-Verhalten von iOS: Fixierte Hintergründe werden beim Scrollen nicht sauber berechnet, was zu Darstellungsfehlern führt.

Die Lösung: Ein CSS-Pseudo-Element

Der Trick besteht darin, ein Pseudo-Element (::before) zu verwenden, das das Hintergrundbild enthält und unabhängig vom eigentlichen HTML-Layout fixiert bleibt. Hier der Code:

html::before {
content: '';
display: block;
/* Hier den Pfad zu deinem Hintergrundbild einfügen */background-image: url(‚https://deine-domain.de/images/hintergrund.jpg‘);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
width: 100vw;
top: 0;
left: 0;
position: fixed;
z-index: –1;
/* Damit das Pseudo-Element hinter dem Inhalt bleibt */
}

Wie funktioniert der Code?

  1. Pseudo-Element ::before: Dieses erzeugt ein unsichtbares, „virtuelles“ Element, das als Hintergrund dient.
  2. background-image: Setzt den Pfad zu deinem Hintergrundbild – ersetze den Beispiel-Link durch deine eigene URL.
  3. background-size und background-position: Stellen sicher, dass dein Bild perfekt zentriert und an die Bildschirmgröße angepasst wird.
  4. position: fixed;: Lässt das Pseudo-Element fixiert bleiben, auch wenn der Benutzer scrollt.
  5. z-index: -1;: Verhindert, dass das Pseudo-Element den sichtbaren Inhalt deiner Seite verdeckt.

So integrierst du den Fix in WordPress:

  1. CSS einfügen:
    • Gehe in den Customizer von WordPress (unter Design > Customizer > Zusätzliches CSS) und füge den Code ein.
    • Alternativ kannst du den Code in die style.css deiner Child-Theme-Datei kopieren.
  2. URL anpassen:
    • Ersetze die URL (https://deine-domain.de/images/hintergrund.jpg) durch den direkten Link zu deinem gewünschten Hintergrundbild. Du kannst das Bild in der WordPress-Mediathek hochladen und den URL-Pfad kopieren.
  3. Speichern und testen:
    • Speichere die Änderungen und teste deine Seite auf einem iOS-Gerät, um sicherzustellen, dass der Hintergrund korrekt angezeigt wird.

Fazit:

Mit diesem CSS-Trick kannst du das Problem von fixierten Hintergründen auf iOS-Geräten elegant lösen. Anstatt mit den Einschränkungen von background-attachment: fixed; zu kämpfen, nutzt du ein einfaches, effektives Workaround. Deine Website sieht auf allen Geräten – ob Desktop, Android oder iOS – großartig aus!

Also: Weg mit den springenden Hintergründen und her mit dem nahtlosen Design! 😊

Januar 2025
MDMDFSS
 12345
6789101112
13141516171819
20212223242526
2728293031