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.