[Seeker_44]

Hallo zusammen

Ich möchte gerne, dass das Hintergrundbild in meinem Element beim Scrollen der Seite wegscrollt, während mein Element an Ort und Stelle bleibt (was es dank position:fixed auch einwandfrei tut). Wie ein Parallax-Effekt, aber umgekehrt: Nicht der Hintergrund soll fixed sein und das Element wegscrollen, sondern genau andersrum.

Egal ob ich das Hintergrundbild auf background-attachment:scroll oder background-attachment:fixed einstelle, es bleibt brav an Ort und Stelle. Ich vermute mal, weil es sich an der Position seines Elements orientiert und nicht am Viewport...

Ich suche schon seit mehreren Tagen nach einer Lösung. Weiss jemand Rat?

Hier meine Testseite zum Rumfummeln: https://jsfiddle.net/ow0mecsj/

Über Rückmeldungen würde ich mich sehr freuen.

[m]

Klar, im fixed Element scroll der background natürlich nicht mit. Du kannst ihn einfach in ein zweites Element hinter dem fixed Element legen:

https://jsfiddle.net/r1e6s74x/1/

[Seeker_44]

Vielen Dank für deine Antwort, m. Das Problem bei deinem Lösungsansatz ist, dass nun das Quadrat mit dem Hintergrundbild aus dem Viewport rausscrollt, man also gar kein Hintergrundbild mehr sieht, wenn man runterscrollt.

Das sich wiederholende (repeat) Hintergrundbild soll zwar scrollen, aber immer nur dort zu sehen sein, wo das fixed positionierte Quadrat ist. Das würde dann beim Runterscrollen fast so aussehen, als wäre der Hintergrund animiert, weil er sich optisch aufwärts bewegt, wobei von unten her immer "neuer" Hintergrund nachrückt (sieht natürlich nur bei Hintergrundbildern gut aus mit Mustern, die sich nahtlos kacheln/wiederholen lassen, sonst sieht man nach jedem Repeat einen unschönen Schnitt/Übergang). Ich habe etwas Mühe, diesen Effekt in Worte zu fassen. Ich hoffe, du verstehst, was ich meine?

[m]

Ah klar. Die einfachste Möglichkeit wäre die background-position property on scroll per javascript anzupassen. Nicht die feine Art, aber um dir eine schnelle und einfache Lösung zu liefern sollte das passen: https://jsfiddle.net/5gt6oaym/

[Seeker_44]

Tausend Dank! Genau das ist der Effekt, den ich erziehlen möchte! :)
Ich hatte schon befürchtet, dass es mit reinem CSS wohl nicht zu bewerkstelligen ist. Aber wenn jemand Javascript ausgeschaltet, funktioniert wenigstens nicht die ganze Webseite nicht mehr, sondern nur dieser Effekt nicht (hoffe ich zumindest).

Du hattest erwähnt: "Nicht die feine Art ..."
Mich wundert, was ist an der Art deiner Lösung nicht fein? (Ich kenne mich da nicht aus, weil ich Javascript nicht beherrsche.)