Title: Parallax auf IPad fehlerhaft
Last modified: 18. April 2022

---

# Parallax auf IPad fehlerhaft

 *  [tr91](https://de.wordpress.org/support/users/tr91/)
 * (@tr91)
 * [vor 4 Jahren, 5 Monaten](https://de.wordpress.org/support/topic/parallax-auf-ipad-fehlerhaft/)
 * Hallo zusammen!
 * Ich habe nach einigen Jahren meine Homepage mal wieder überarbeitet und habe 
   nun das Problem, dass der eingebaute Parallax-Effekt auf dem IPad total beschissen
   aussieht.
 * Ich habe mich schon dazu entschieden, jede Seite einmal für den Pc und die gleiche
   Seite noch einmal für Mobilgeräte (ohne Parallax und angepasst) zu erstellen.
 * Das iPad greift auf die Desktop-Version zu. Auf der Startseite wird der Parallax-
   Effekt angezeigt (wenn auch noch unschön); auf der Seite „Preise“ wird der Effekt
   nicht angezeigt. Vielmehr ist auf der „Preise“-Seite viel zu sehr in das Bild
   hineingezoomt und es ist verpixelt. Auf der Desktop-Version funktioniert alles.
 * Ich habe – soweit ich weiß – keine unterschiedlichen CSS-Codes auf den Seiten.
 * Ich habe mich bereits im Netz etwas schlau gelesen und den folgenden CSS-Codes
   eingebunden (ohne Erfolg):
 *     ```
       @media (min-width: 768px) and (max-width: 1024px){
       .section-style.parallax_section{
       background-size: contain !important;
       -webkit-background-size: cover !important;
       background-position: center !important;
       background-attachment: inherit !important;
       }
       }
       ```
   
 * Könnt ihr mir helfen?
    Danke & schöne Grüße!
 * Die Seite, für die ich Hilfe brauche: _[[Anmelden](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fde.wordpress.org%2Fsupport%2Ftopic%2Fparallax-auf-ipad-fehlerhaft%2F%3Foutput_format%3Dmd&locale=de_DE),
   um den Link zu sehen]_

Ansicht von 1 Antwort (von insgesamt 1)

 *  Moderator [Bego Mario Garde](https://de.wordpress.org/support/users/pixolin/)
 * (@pixolin)
 * Moderator (nicht mehr aktiv)
 * [vor 4 Jahren, 5 Monaten](https://de.wordpress.org/support/topic/parallax-auf-ipad-fehlerhaft/#post-126828)
 * Auch hier wieder der Hinweis, dass wir hier keine Grundlagen zu CSS, HTML, PHP,
   FTP, JavaScript, REACT, Erster Hilfe, Seepferdchen usw. anbieten können, weil
   dies ein WordPress-Forum ist.
 * Trotzdem zu dem geposteten CSS ein paar Hinweise:
    `background-size: contain`
   wird auf dem Mozilla Developer Network so beschrieben:
 * >  Das contain Schlüsselwort behält das Seitenverhältnis des Hintergrundbildes
   > bei und skaliert es so, dass es so groß wie möglich ist, aber vollständig im
   > Hintergrund-Positionierungsbereichs enthalten ist.
 * Quelle: [MDN, background-size: Werte](https://developer.mozilla.org/de/docs/Web/CSS/background-size#werte)
 * Die CSS-Regel sorgt also nur dafür, dass ein Hintergrundbild richtig skaliert
   wird. Vereinfacht gesagt wird hier der auf Mobilgeräten schlecht umsetzbare Parallax-
   Effekt durch die Anzeige eines bildschirmfüllenden Bildes ersetzt. Zum WordPress-
   Theme Astra gibt es einen guten Artikel in der Dokumentation, der darauf eingeht:
   [Why Doesn’t Parallax Scrolling Work on Mobile?](https://wpastra.com/docs/parallax-not-working-on-mobile/)
 * Der Zusatz `!important` ist als letztes Mittel zum Überschreiben von Inline-Styles
   gedacht und sollte sparsam verwendet werden. Meist lässt sich die Verwendung 
   von `!important` durch eine geschickte(re) Auswahl von Selektoren vermeiden.

Ansicht von 1 Antwort (von insgesamt 1)

 Das Thema „Parallax auf IPad fehlerhaft“ ist für neue Antworten geschlossen.

## Schlagwörter

 * [ipad](https://de.wordpress.org/support/topic-tag/ipad/)
 * [parallax](https://de.wordpress.org/support/topic-tag/parallax/)
 * [Safari](https://de.wordpress.org/support/topic-tag/safari/)

 * In: [Allgemeine Fragen](https://de.wordpress.org/support/forum/allgemeine-fragen/)
 * 1 Antwort
 * 2 Teilnehmer
 * Letzte Antwort von: [Bego Mario Garde](https://de.wordpress.org/support/users/pixolin/)
 * Letzte Aktivität: [vor 4 Jahren, 5 Monaten](https://de.wordpress.org/support/topic/parallax-auf-ipad-fehlerhaft/#post-126828)
 * Status: nicht gelöst

## Themen

### Beliebteste Themen

### Unbeantwortete Themen

### Nicht-Support-Themen

### Gelöste Themen

### Ungelöste Themen

### Alle Themen