Handydisplay: Hintergrundbild scrollt trotz Fixierung

  • Gelöst clavigo

    (@clavigo)


    vor 5 Jahren, 11 Monaten

    Liebe Leute,
    ich beobachte folgende Merkwürdigkeit:
    Ein body-Hintergrundbild ist per „background-attachement: fixed;“ fixiert, so daß es sich nicht mitbewegt, wenn der Seiteninhalt gescrollt wird.
    Dies funktioniert auch, wenn sich die Seite auf einem Tablet (Samsung, Adroid, Firefox) responsiv verändert.
    Auf einem Handy (Android, Firefox) dagegen wird das Bild nach oben weggeschoben und es erscheint dann Leeraum, d.h. die Fixierung funktioniert nicht.
    Wie kann das sein?
    NB: Ich arbeite mit dem Astra-Theme und hauptsächlich mit Elementor.
    Die Hintergrundbilder sind in css über seitenspezifische Body-Klassen eingebaut und positioniert.
    Vielen Dank im Voraus für eure Ideen!
    BG, Tobias

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 6 Antworten – 1 bis 6 (von insgesamt 6)
  • Moderator Angelika Reisiger

    (@la-geek)

    vor 5 Jahren, 11 Monaten

    @clavigo, hallo Tobias,

    wenn das nicht hilft,

    https://stackoverflow.com/questions/26372127/background-fixed-no-repeat-not-working-on-mobile

    dann wird ein Link zur Website wohl unumgänglich sein.

    Thread-Starter clavigo

    (@clavigo)

    vor 5 Jahren, 10 Monaten

    Liebe Leute,
    sorry, daß dieses Thema so lange unbearbeitet herumgehangen hat… 🙁
    Als ich es angefangen habe, war die Website noch nicht online, deshalb gab es auch nichts zu sehen.
    Link oben eingetragen.
    Das Problem mit den wegscrollenden Hintergründen auf dem Handy besteht immer noch.
    Es geht dabei nur um die kleinste Responsiv-Stufe (Handy). Auf dem Tablet ist alles ok.
    @la-geek : Die Lösung mit dem negativen z-Index hat leider nicht funktioniert.
    Ich freue mich über jeden Hinweis!
    BG, Tobias

    Moderator Angelika Reisiger

    (@la-geek)

    vor 5 Jahren, 10 Monaten

    Eventuell mal mit !important versuchen? Oder die Einbindung des Hintergrundbildes nicht Elemtor überlassen, sondern alles mit eigenem CSS schreiben?

    Hier ist ein weiterer Lösungsvorschlag, auch mit z-index: -10. Es gibt auch einen berühmt-berüchtigten Z-Index-Bug, der möglicherweise das Setzen von -10 verhindern könnte, kommt auf die Konstellation an.

    Thread-Starter clavigo

    (@clavigo)

    vor 5 Jahren, 10 Monaten

    Hallo,
    Vielen Dank!
    Der Lösungsvorschlag von codepen.io sieht interessant aus und ist, trotzdem er auch mit Negativ-z arbeitet, deutlich aktueller, als der vorherige. Das ist im Mobil-Bereich bestimmt von Vorteil. Mal probieren…
    Die Bilder sind tatsächlich bereits alle mit eigenem css eingebunden.
    Das Theme läßt nur ein Hintergrundbild zu und im Elementor mache ich nur die einzelnen Elemente bzw. Blöcke.
    BG, Tobias

    • Diese Antwort wurde vor 5 Jahren, 10 Monaten von clavigo geändert.
    Thread-Starter clavigo

    (@clavigo)

    vor 5 Jahren, 8 Monaten

    Liebe Leser dieses Themas,
    etwas unglaubliches ist geschehen:
    Das Problem der nach oben wegscrollenden Hintergründe hat sich in Luft aufgelöst.
    Offenbar wurde dies als Bug bei einem der letzten App-Updates behoben. Sowohl der mobile Firefox, als auch Chrome halten die „fixed“-Hintergründe nun am Platz. Das Bild zappelt manchmal ein bisschen, aber das ist wohl der Grafikleistung des jeweiligen Handys geschuldet.
    Das Thema kann also als gelöst gelten.
    Ich möchte noch auf ein anderes Thema hinweisen, bei dem es auch um Hintergründe in mobilen Browsern geht:
    https://de.wordpress.org/support/topic/hintergrund-skaliert-nicht-auf-chrome-mobile/

    Beste Grüße, Tobias

    • Diese Antwort wurde vor 5 Jahren, 8 Monaten von clavigo geändert.
    • Diese Antwort wurde vor 5 Jahren, 8 Monaten von clavigo geändert.
    Moderator Hans-Gerd Gerhards

    (@hage)

    vor 5 Jahren, 8 Monaten

    Hallo,
    danke für die Infos.
    Viele Grüße
    Hans-Gerd

Ansicht von 6 Antworten – 1 bis 6 (von insgesamt 6)
  • Das Thema „Handydisplay: Hintergrundbild scrollt trotz Fixierung“ ist für neue Antworten geschlossen.