iPhone Safari - fixed background image

In diesem Blog wird kurz erklärt, wie man in Safari auf dem iPhone ein fixed background image erhält.

Kurz erklärt: als Hintergrundbild dient ein <img>, dieses wird im CSS mit position: fixed fixiert und mit z-index: -1 eine Ebene hinter die Standard (default) Ebene geschoben. Mithilfe von top: 0, right: 0, bottom: 0, left: 0 sagen wir dem Bild dank position: fixed, sich komplett auszubreiten. Damit der gesamte Hintergrund ausgefüllt wird, wird die Breite (width) und die Höhe (height) auf 100% gesetzt. Hierfür wird noch display: block benötigt, da ein <img> kein block Element von Haus aus ist. Zum Schluss wird mit object-fit: cover dafür gesorgt, dass das Bild sich in allen Richtung komplett ausbreitet.