30. September 2023

background-Attachment: fixed und background-size: cover auf einem iPhone oder iPad

Es ist ein altes Problem, das Apple leider bis heute nicht behoben hat: Die CSS-Eigenschaft „background-Attachment:fixed“ lässt sich nicht in Kombination „background-size: cover“ nutzen. Während auf dem Desktop alles normal aussieht, wird das Hintergrundbild unter iOS viel zu groß dargestellt, also nicht durch „background-size: cover“ in das div eingepasst.

Erst seit dem Release von iOS 17 vor wenigen Tagen, wird das Hintergrundbild nicht mehr zu groß dargestellt – allerdings ist es auch nicht „fixed“ sondern scrollt stattdessen einfach mit.

Mit folgendem CSS lässt sich der Hintergrund auch unter iOS fixieren:

.fixedbgimg::before {
    content: ' ';
    display: block;
    background-image: url('assets/img/bar.jpg');
    background-position: center;
    background-size: cover;
    height: 100vh; 
    width: 100vw;
    top: 0; bottom: 0; left: 0; right: 0;
    position: fixed;
    z-index: -10; 
}Code-Sprache: CSS (css)

Hier geht´s zur Demo.