animiertes SVG als Hintergrund

[Matthias Apsel]

Hallo grmblfx,

Darf ich noch um eine Erklärung bitten, weil ich es trotz der Einfachheit leider nicht ganz verstehe:

Zeilenumbrüche erzeugt man in diesem Forum, indem man zwei Leezeichen ans Zeilenende macht.

Warum ist background-size 200vh, nicht 100?

Damit der Hintergrund doppelt so hoch ist, wie der Viewport, irgendwo muss das Transparent ja hin.

Und warum dann to { background-position-y: 50%; }?

immer bis zur Hälfte der Elementhöhe. Am Anfang ist also die Trennlinie genau unten am Viewport.

Und müsste es nicht ein Farbverlauf sein (linear-gradient) und nicht eine scharfe Trennlinie?

Es lassen sich durch doppelte sogenannte color-stops auch scharfe Übergänge erzeugen.

Wenn ich das Beispiel in meine Seite kopiere, wird nicht der ganze Viewport bis nach oben ausgefüllt, sondern die Animation endet bei ca. 70% der Höhe. Wie bekomme ich es bis ganz nach oben? Ich habe verschiedene Zahlen ausprobiert, aber irgendwie habe ich das Prinzip dahinter noch nicht verstanden.

Dann ist dein body-Element nicht so hoch wie der Viewport. Wenn du das html-Element stattdessen nimmst, solltest du erfolgreicher sein.

Bis demnächst
Matthias