iPhone Safari – fixed background image

fixed background image Beitragsbild

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

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.

Veröffentlicht am
Kategorisiert in CSS, Hacks