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

Falls codepen gerade nicht läuft, das ist das wichtige CSS:

html::before {
  content: ' ';
  display: block;
  //hier den Pfad zu deinem Hintergrundbild einsetzen
  background-image: url('https://deine-domain.de/images/hintergrund-foto.jpg'); 
  background-position: center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: -10; // Das hier ist sehr wichtig!
}

 

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

Kommentare

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

    1. Hi Daniel,

      Meinst du der Link funktioniert nicht oder der Workaround funktioniert nicht?
      Bei mir funktioniert beides noch…

      Viele Grüße
      Julia

  2. Hallo Julia,
    danke für diesen super Tipp. Hat einwandfrei funktuioniert.
    Eine Frage hätte ich noch. Kennst Du auch eine Lösung für IOS, dass das Hintergrundbild ordentlich angezeigt wird und trotzdem stehen bleibt, also der andere Text drüber läuft?
    Danke und noch einen schönen Tag.
    Lg, Hermine

Schreibe einen Kommentar

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

Diese Beiträge interessieren dich vielleicht auch