animiertes SVG als Hintergrund

[grmblfx]

Hallo und gutes neues Jahr!

Es scheint ein simples Problem, aber wir bekommen es nicht hin:

Für eine Rätsel-/Quizseite, das man in bestimmter Zeit lösen muss (wahrscheinlich einfach per <meta http-equiv="refresh" realisiert) möchte mein Sohn gerne, dass im Hintergrund in dieser Zeit langsam "das Wasser steigt", d.h. der Hintergrund sich langsam von unten nach oben blau verfärbt.

Unsere Idee war, einfach eine simple SVG-Grafik als Hintergrund einzufügen, wo ein blaues Rechteck sich von unten nach oben bewegt, in etwa so:

<rect id="wasser" y="1100" width="2500" height="2200" fill="blue">
    <animate 
	     attributeName="y" 
	     from="1100" to="0" 
	     dur="10s"  
         repeatCount="0" />
    </rect>Quelltext hier

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...

Wir freuen uns über Tipps oder auch Ideen, vermutlich ist die Lösung einfach ...

Gruß Daniel