WordPress, SEO, Security, PageSpeed, CSS, Arbeitsabläufe

ipad-css-hacks
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on whatsapp
Share on email

Hintergrundbilder auf iPhone und iPad zerschossen

Themen auf dieser Seite

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

Teile das mit deinen Kollegen

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on whatsapp
Share on email

Feedback willkommen

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne (2 Stimme(n), Durchschnitt: 5,00 von 5)
Loading...

Kommentare

5 Antworten

  1. 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! 🙂

Schreibe einen Kommentar

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

Diese Beiträge interessieren dich vielleicht auch