Div mit dynamischer Höhe und Farbverlauf

[TZP]

Moinz.
Ich hab ein Problem und vielleicht weiß jemand Rat. Momentan bastel ich an einem kleinen Div, welches Text und einen Farbverlauf beinhaltet. Der Verlauf fängt oben weiß an und so ab der Hälfte wird er blau, bis er ganz unten dunkelblau ist.
Jetzt soll Text dazu und der Verlauf soll sich dynamisch der Höhe anpassen...immer erst ab der Mitte mit blau anfangen aber das krieg ich nicht hin. Hab ich nur eine Zeile Text, ist der Verlauf gar nicht zu sehen. Hab ich zweihundert Zeilen, fängt der Verlauf irgendwann an, ist zu Ende und macht mit normalem #FFFFFF weiter.
Mit repeat-y hab ich es schon versucht aber dann wiederholt sich der Verlauf dauernd...auch nicht das Gelbe vom Ei.
Bin für alle Vorschläge offen. :)

Der Code aus der CSS

#box             { float: left; width: 200px; background:url("background.jpg") repeat-x scroll left top transparent; }

-bedank-

 

[prm]

Ich würde es so lösen:
Fertige eine recht lange Verlaufsgrafik an, die in der Mitte diese "Farbwechselstelle" von weiß nach blau hat. Sie sollte so hoch sein, dass sie auch für sehr langen Text ausreicht.
Diese dann in der Mitte mit

background-position: 0 50%;

positionieren und mit x-repeat kacheln lassen.