Bild verschlingen durch scrollen

Hallo liebe Community,

das ist mein erster Beitrag hier und ich denke, dass auch noch einige folgen werden, in denen ich dann Hilfreiches beisteuern kann.

Ich habe folgendes Problem:
Derzeit arbeite ich an einem Template, in dem ich im Header ein Bild einfügen möchte, welches beim nach oben scrollen verschwiegnen soll, aber nicht lindem das vild selbst hoch rutscht, sondern eher, dass der div darunter es „verschlingt“. mit einem einfachen z-index kann ich das leider nicht machen, da eine kleine transparenz eingebaut ist.

Kann mir jmd. ein Codebeispiel geben? Ich komme echt nicht mehr weiter. Am Liebsten ohne javascript o.ä.

Das Bild im Hintergrund ist gemeint, welches die Erde und Satelliten zeigt.
http://spacetimelab.de/content/templates/heisenberg/SC1.jpg

Ein Div unter dem Bild soll das Bild beim hochscrollen verschlingen?

Ehrlich gesagt ich weiss bei deiner Beschreibung nicht welchen Effekt du erreichen willst. Kannst du das noch etwas anders beschreiben und dann am besten gleich noch einen Link zu deiner Seite posten. Das Bild hilft hier kein bisschen weiter.

Gruss
Elroy

Wenn ich dich richtig verstehe, dann kannst du das mit den CSS3 Eigenschaften scale() und rotate() erreichen. Damit kannst du einen Effekt erzeugen, der das Bild dreidimensional nach hinten klappt und dann auf 0 skaliert. Das sollte so ähnlich aussehen wie der Introtext bei den alten Starwars Filmen.