Dieses Bild hat eine fixierte Position
Tutorial fixiertes Hintergrundbild
Translate this page
Dieses Bild hat eine absolute Position
sowie die zusätzliche CSS-Anweisung: background-attachment: fixed;
Diese CSS wird aber vom iPhone nicht verarbeitet
Translate this page
Diese Seite dient auch als Test für ein fixiertes Hintergrundbild am iPhone.
Das oberste Bild hat folgende CSS, die auch am iPhone so funktioniert:
.bild1 {
background-image: url(https://www.mobirise-tutorials.com/Tutorials/images/Abendstimmung.jpg);
display: block;
background-position: center;
background-size: cover;
height: 100vh;
width: 100vw;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: fixed;
z-index: 0;
}
Das schwarz-weiße Bild darunter hat anstelle von "position: fixed" diese CSS-Anweisung:
background-attachment: fixed;
Das funktioniert an allen Browsern - nur am iOS vom iPhone nicht.
Man kann auch dem zweiten Bild nicht die gleiche "position: fixed" geben, da sonst durch das Fixieren der Position das erste Bild überdeckt wird.
Bitte lest für alle Anweisungen mein vollständiges Tutorial auf meiner Seite zu den zeitgesteuerten Wechselbildern.
iPhone Test
Am Screenshot eine Test-Programms für das iPhone kann man gut erkennen, dass nur das obere Bild korrekt dargestellt wird.
Das untere, schwarz-weiße Bild kann dagegen nicht richtig dargestellt werden, weil das iOS vom iPhone diese CSS-Anweisung nicht kennt:
background-attachment: fixed;