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:
24 Antworten
Danke für die Lösungen dafür
mit dem Workaround hat es ja tatsächlich funktioniert! Danke
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! :-)
Hallo Julia,
leider scheint der verlinkte Workaround unter https://codepen.io/joeyred/pen/pEagLQ nicht mehr zu funktionieren. Hättest Du zufällig eine aktuelle Lösung für das Problem?
Danke!
Hi Daniel,
Meinst du der Link funktioniert nicht oder der Workaround funktioniert nicht?
Bei mir funktioniert beides noch…
Viele Grüße
Julia
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
Hallo Hermine,
der zweite Hack sollte eigentlich genau das machen. Das Snippet das mit html::before anfängt.
Hast du es ausprobiert?
Lg, Julia
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!!
Hallo Mischa, freut mich sehr! Dafür mache ich das ganze hier :-)
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 :D
Liebe Jenny, danke für dein Feedback! Das freut mich sehr :-)
Danke, endlich ein fertiges stück vom Code!
Hat super funktioniert! Danke!
Vielen Dank auch von meiner Seite! Habe ebenso gesucht, getestet, gesucht, getestet, gesucht… usw.. Endlich passt alles. Großartig.
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;
}
}
Hallo Jan, ich war gerade auf deiner Website und habe sie mir in Chrome, Firefox und Safari angesehen. Sah alles gut aus. Hat sich dein Problem schon erledigt?
Damit kann man was anfangen.
Das ist ein echt toller Artikel.
Es lohnt sich wirklich sich hier einzulesen. Man kann so viel lernen und es ist alles kompakt in einem Blog wirklich klasse!
Eine gute Mobilansicht ist sehr wichtig. Die meisten User nutzen mobile Endgeräte
Vielen Dak das funktioniert, aber hast du eine Lösung, wenn ich mir mehrere Parallaxen haben
Was für eine genaue Anleitung und eigentlich so simple. Das merk ich mir mal gleich =D.
Das ist ja mal eine klasse Sache. Super!
Ich habe aber noch ein kleines Randproblem.
Ich lasse auf einer Seite das Hintergrundbild der Uhrzeit entsprechend ändern mit einem Javascript.
Da hadere ich gerade daran, dass ich dem :before kein neues Bild zugeordnet bekomme.
Bislang (also in der Nicht-Apple-Version) ging das einfach mit
document.getElementById(„Header-Teil-3“).style=`background-image: url(${bild})`;
Aber mit dem before…?
Frank
Hallo Frank, zum Theme Javascript und Pseudo-Element ::before habe ich das hier gefunden. Vielleicht hilft das ja?
https://www.designcise.com/web/tutorial/how-to-get-content-of-before-pseudo-element-using-javascript