Vicentini Webdesign Blog

Tips, Anleitungen, Arbeitsabläufe, Inspiration, News und Trends

Hintergrundbilder auf iPhone und iPad zerschossen

Ich wurde grade von einer Webdesigner-Kollegin gefragt: Wieso sieht mein Hintergrundbild auf dem iPhone und iPad so pixelig aus? Auf dem Desktop und Samsung Smartphone ist alles in Ordnung.

Die CSS-Eigenschaften sind:
background-size: cover;
background-attachment: fixed;

Die Antwort auf diese Frage ist:
background-attachment: fixed funktioniert auf iOS Safari nicht.

Es gibt zwei verschiedene Lösungen für dieses Problem:

A) Setze background-attachment auf scroll und mittels media-Query nur für Desktop auf fixed

// all screens
.hero-bg{background-attachment: fixed;}
// Large and XLarge
@media only screen and (min-width: 64.063em) {
.hero-bg {background-attachment: scroll;}
}

B) Nutze diesen Workaround, dann hast du den gewünschten Hintergrund-Effekt auch auf iOS Geräten:
Fixed Background auch auf iPhone/iPad ohne Javascript:
https://codepen.io/joeyred/pen/pEagLQ

Das Ergebnis? Auch im mobilen Apple Browser sieht eure Website super aus:

auf dem iPad sieht mein Hintergrundbild furchtbar aus
Vorher
Hintergrundbildgröße passt sich automatisch an iPad/iPhone an
Nachher

Kennst du jemanden, der das lesen sollte? Oder willst du dir den Beitrag für später merken? Dann wäre Teilen eine Idee...

3 Kommentare

  • Sehr gerne, Amelie und Matin! Lustig nur, dass ihr beide die selbe IP-Adresse habt und beide auf eine SEO-Agentur verlinkt. Bringt Link-Building über Blog-Kommentare überhaupt noch etwas? Ich wünsche „euch“ viel Erfolg! 🙂

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.