Das leidige Problem mit dem Safari Mobile-Browser kennen wir ja inzwischen zu gut. Viele CSS-Interpretationen funktionieren einfach nicht, wie sie sollen. Der fixed-background ist dabei nur eines. Speziell im Fall, dass wir ein Bild haben welches weder gekachelt noch wiederholt werden kann, brauchen wir eine Lösung. Die Lösung – wenn auch nicht sonderlich schön – bringt background-size:cover mit.
Dazu tauschen wir body{background: #fff URL(..image/...) top center fixed no repeat; }, durch
body {
background: url('http://dein.hi/ntergrund/bild.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 1800px;
}
aus.
Das Hiuntergrundbild bedeckt dadurch die 100%ige Höhe der Seite und nicht mehr nur des aktuellen Bildschirmes bzw. die Gesamtgröße des Orginialbildes. Somit haben wir keine hässlichen Kanten mehr im Hintergrund, wenn wir das Bild kacheln und auch kein abruptes Ende und dann nur noch Hintergrundfarbe.
Ich hoffe, ich konnte durch diesen Codeschnipsel etwas helfen. Ich suche definitiv nach weiteren Lösungen. Wer sich das ganze live anschauen möchte, kann das gerne unter voodoo-croo.de machen. Schaut euch die Seite auch gerne am iPhone bzw. am iPad an.
Quelle
