Fixiertes Hintergrundbild unter iOS

Safari hat unter iOS Probleme mit Hintergrundbildern mit der Eigenschaft background-attachment: fixed;, was man beispielsweise bei caniuse.com nachvollziehen kann.

Für dieses Problem gibt es einen Workaround, nämlich das html::before-Preudoelement zu „missbrauchen“. Der dafür erforderliche CSS-Code sieht wie folgt aus:

html::before {
  content: ' ';
  display: block;
  background-image: url(https://example.com/bg-image.jpg);
  background-position: center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: -10;
}

In Zeile 4 muss lediglich der Pfad zum gewünschten Hintergrundbild angegeben werden, anschließend hat man auch unter iOS ein fixiertes Hintergrundbild.