Überwindung der Einschränkungen der Hintergrundgröße: Cover in Mobile Safari

iOS-Geräte stellen eine einzigartige Herausforderung dar, wenn es darum geht, Hintergrundbilder zu implementieren Decken Sie ganze Elemente mit „background-size: cover“ ab. Trotz des erwarteten Verhaltens führt diese Eigenschaft auf diesen Plattformen häufig zu unerwünschten Ergebnissen.

Um dieses Problem zu beheben, wurde eine clevere Problemumgehung entwickelt. Durch Anpassen der Eigenschaft „Hintergrundanhang“ zum Scrollen innerhalb einer Medienabfrage, die speziell auf iPhones abzielt, kann das problematische Verhalten korrigiert werden.

Hier ist eine aktualisierte Version des bereitgestellten Codes:

.section {
  margin: 0 auto;
  position: relative;
  padding: 0 0 320px 0;
  width: 100%;
}

#section1,
#section2,
#section3 {
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;

  @media (max-width: @iphone-screen) {
    background-attachment: scroll;
  }
}

Durch die Einbindung dieser Medienabfrage wird die Eigenschaft „background-attachment“ so eingestellt, dass sie nur für Geräte scrollt, deren Breite kleiner oder gleich der vordefinierten @iphone-screen-Variable ist. Dadurch wird sichergestellt, dass sich die Hintergrundbilder auf iPhones wie erwartet verhalten, während sie auf größeren Bildschirmen ihre feste Position beibehalten.

Diese Lösung bietet eine einfache und elegante Möglichkeit, dieses häufige Problem zu lösen und ermöglicht Ihnen die Erstellung nahtloser Hintergrundbilder in voller Breite auf allen Geräten, einschließlich iOS.