webentwicklung-frage-antwort-db.com.de

CSS-Hintergrundbilder werden auf iPad und iPhone falsch skaliert.

Das Hintergrundbild meiner Website lässt sich in Chrome und Safari mithilfe von background-size: cover problemlos anpassen, aber wenn ich meine Website auf einem iPad oder iPhone testen möchte, wird das CSS-Hintergrundbild wirklich vergrößert und sieht schrecklich aus. Ich habe viele andere Fragen dazu gelesen und keine hat mein Problem gelöst. 

HTML

<div class="background"> 

</div><!--background-->

.background hat keinen Container und ist 100% Bildschirmbreite.

CSS

.background {
    height:600px;
    width:100%;
    position:relative;
    background: url(css/img/strand.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
21
chap

Ich hatte das gleiche Problem, ich habe SCROLL anstelle von FIXED verwendet.

background-attachment:scroll;
50
Etienne Dupuis

Anscheinend liegt das Safari des iPad Downsampling Bilder über der 1024px-Schwelle. Ich hatte versucht, scroll anstelle von fixed zu verwenden, aber das gelang nicht. Andere Tricks funktionierte bei mir auch nicht.

Ich löste das indem ich mein ursprünglich zu großes 1600 × 1600-Bild in zwei Bilder aufteilte. Aus diesem Grund konnte ich zwei Bilder mit einer Größe von 1024px verwenden und erreichte eine noch bessere Lesbarkeit als zuvor.

Vielleicht würde eine solche Problemlösung auch für Sie funktionieren.

0
WoodrowShigeru