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](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. ~~~ XML 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](https://wiki.selfhtml.org/wiki/SVG/Farben/Verl%C3%A4ufe#Der_lineare_Farbverlauf) Dieses Markup könntest Du auch direkt in die background-image-Eigenschaft einbinden. > Herzliche Grüße Matthias Scharwies -- Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“

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](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. ~~~ XML 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></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](https://wiki.selfhtml.org/wiki/SVG/Farben/Verl%C3%A4ufe#Der_lineare_Farbverlauf) Dieses Markup könntest Du auch direkt in die background-image-Eigenschaft einbinden. > Herzliche Grüße Matthias Scharwies -- Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“