JV Webdesign BLOG

WordPress, Produktivität, Marketing, How-To

Hintergrundbilder auf iPhone und iPad zerschossen

Inhaltsangabe

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 Wege, wie du das hässliche Hintergrundbild auf iPad und iPhone umgehen kannst:

1. background-attachment für mobile Geräte auf scroll setzen

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

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

2. background-attachment fixed iOS-Workaround

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 Stück 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 Browser von iPhone und iPad sieht eure Website super aus:

auf dem iPad sieht mein hintergurndbild furchtbar aus
vorher
ipad hero background schoen webdesign flensburg
nachher

Kommentare

21 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

  3. Ich weiss nicht wieviele Stunden ich damit verblödet habe, im Entwicklertool alles perfekt aber auf dem iPhone sah es aus wie Müll, tausend Foren durchsucht und tausend Code Kombinationen ausprobiert und dann einfach hier ein fertig funktionierendes Stück Code…

    Tausend Dank!!

  4. Danke danke und nochmal danke! Ich hab die letzten Stunden zig „workarounds“ ausprobiert, weil die Äpfel mal wieder ganz besondere Extrawürste wollten, und nichts wollte funktionieren. Jetzt ist alles hübsch. Du hast meinen Tag gerettet 😀

  5. Vielen Dank auch von meiner Seite! Habe ebenso gesucht, getestet, gesucht, getestet, gesucht… usw.. Endlich passt alles. Großartig.

  6. Sorry, ich noch mal. Habe die Lösung von oben im WordPress-Customizer mit „100dvw“ und „100dvh“ ergänzt und außerdem das ganze noch mal als zweite Version für mobile Ansicht (anderes Bild; kleinerer Ausschnitt) angelegt, damit es in allen mobilen Browsern gleich angezeigt wird, bzw. sich gleich verhält. Was allerdings komisch ist und mich stört, ist, dass bei der ersten Ansicht (bzw. Neuladen) der Seite das Hintergrundbild passt… sobald ich aber nach unten scrolle wird es ein Stück vergrößert, also sozusagen „rein gezoomt“. Wenn ich jedoch (wieder) nach oben scrolle (es reicht ein Stück; also nicht zwangsläufig bis ganz nach oben, weil da würde es ja ohnehin wieder normal angezeigt werden) erscheint es wieder „normal“ (also wieder kleiner). Schöner wäre natürlich wenn es sich gar nicht verändern würde, also die erste „kleinere“ Ansicht einfach so bleiben würde beim Scrollen. Vielleicht hat hierzu ja jemand noch einen Tipp. Ich würde mich wirklich sehr freuen.

    Hier meine beiden Einträge zum besseren Verständnis:

    html::before {
    content: ‚ ‚ !important;
    display: block !important;
    background-image: url(‚https://www.***.de/wp-content… ***.webp‘) !important;
    background-position: center !important;
    background-size: cover !important;
    width: 100vw !important;
    width: 100dvw !important;
    height: 100vh !important;
    height: 100dvh !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    position: fixed !important;
    z-index: -10 !important;
    }

    @media only screen and (max-width: 769px) {
    html::before {
    content: ‚ ‚ !important;
    display: block !important;
    background-image: url(‚https://www.***.de/wp-content… ***mobil.webp‘) !important;
    background-position: center !important;
    background-size: cover !important;
    width: 100vw !important;
    width: 100dvw !important;
    height: 100vh !important;
    height: 100dvh !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    position: fixed !important;
    z-index: -10 !important;
    }
    }

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Newsletter abonnieren

Diese Beiträge interessieren dich vielleicht auch

Diese Website nutzt, wie in meinen Datenschutzhinweisen beschrieben, teilweise technisch erforderliche Cookies - keine Tracking- oder Werbe-Cookies.