loading...
Cover image for iPhone Safari – fixed background image

iPhone Safari – fixed background image

tobiasroeder profile image Tobias Röder Updated on ・1 min read

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 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.

Discussion

pic
Editor guide