iPhone Safari – fixed background image

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

In diesem Codepen Beispiel ist ein Lösungsweg, wie man ein fixiertes Hintergrundbild beim iPhone Safari mit CSS erhält.

Kurz erklärt: als Hintergrundbild dient ein <img>, dieses wird mit CSS mit position: fixed fixiert und mit z-index: -1 eine Ebene hinter die Standart (default) Ebene geschoben. Mithilfe von top: 0, right: 0, bottom: 0, left: 0 geben wird dem Bild dank position: fixed soll 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 Schluß wird mit object-fit: cover dafür gesorgt, dass das Bild sich in allen Richtung komplett ausbreitet.