pst0042
14.05.2020, 16:49
CSS-Hintergrund fixed auf Mobilgeräten?

Hallo zusammen,

auf meiner Website habe ich ein Hintergrund eingebunden, welches mit background-attachment:fixed; beim Scrollen fixiert ist. Auf Mobilgeräten wird das aber anscheinend nicht erkannt, sodass das Bild dort verzerrt ist.

Im Internet konnte ich bis jetzt nichts finden, außer, dass es nicht erkannt wird. Einen guten Lösungsvorschlag konnte ich nicht finden. Deshalb hoffe ich, dass ihr mir helfen könnt. Vielen Dank schonmal für alle Antworten!

Hier noch ein Ausschnitt aus meinem Code:

body {
  background-image: url("../../img/Tardan99x.jpg");
  background-attachment:fixed;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
...zum Beitrag
Antwort
von seepferdchen236
15.04.2021, 11:01

Hallo,

falls du immer noch nach einer Lösung suchst oder das jemand liest, der das gleiche Problem hat:

Ich bin Webdesignerin und habe vor einiger Zeit auch nach einem Workaround gesucht, wie ich das Problem mit dem fixed Background auf iOS lösen kann. Es gibt einen CSS Hack, damit es mit dem fixed Background auch auf Mobilgeräten funktioniert:

Du brauchst ein Element im Hintergrund (z-index:-10), dass du mit position: fixed über das ganze Fenster aufspannst. Dieses Element enthält dann das Hintergrundbild.

Ich habe es in einem Blogpost aufgeschrieben, weil mich öfter Kollegen danach fragen. Dort findest du auch den genauen CSS Code.

https://julia-vicentini.de/blog/hintergrundbilder-auf-iphone-und-ipad-zerschossen/

Ich hoffe es hilft.

Viele Grüße
Julia

...zur Antwort