animiertes SVG als Hintergrund

[Matthias Scharwies]

Frohes neues Jahr!

Was wir nicht hinbekommen:

Wie kann man per CSS steuern, dass sich die Grafik den gesamten Hintergrund einnimmt? Wir haben es sowohl per background-size: mit 100vh/100vw versucht als auch die Grafik in einen Container per position:fixed eingebaut, aber irgendwie klappt es nicht...

body {
  background-size: 100% 100%;
}

Müsste doch gehen, oder?

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Hintergrund/background#background-size

Ich würde ein SVG mit einem Verlauf anlegen, dessen stop (bzw. der offset-Wert) dann mit SMIL nach oben geht.

svg viewbox="0 0 550 250">
	<title>Beispiele für lineare Farbverläufe</title>
	<defs>
		<desc>Hier werden die Farbverläufe definiert und über die id dann aufgerufen</desc>
		<linearGradient
		id="verlauf1" x1="0%" y1="0%" x2="0%" y2="100%">
			<title>Verlauf 1</title>
			<stop offset="0%" stop-color="white" />
			<stop offset="100%" stop-color="blue">
			 	<animate 
		attributeName="offset" 
		to="0" 
		dur="5s" 
		fill="freeze"
	/>   
			</<stop>
 </linearGradient>
	</defs>
	<rect id="eins" x="10" y="10" width="150" height="200" fill="url(#verlauf1)" />
</svg>

SVG/Farben/Verläufe#Der_lineare_Farbverlauf

Dieses Markup könntest Du auch direkt in die background-image-Eigenschaft einbinden.

Herzliche Grüße

Matthias Scharwies