Div - Box som löper vidare

Hej.
Jag får inte till det alls, och tycker jag har googlat och testat men ändå vill det sig inte. Jag vill ha en box där det ska ligga info, och den ska öka i höjd och förlänga bakgrunden i mitten. Jag visar en bild för att få er att fatta...

Blir det nu mer text ska det blåa fältet ökas... Hur löser jag detta?

Du borde kunna göra något i stil med:

<div id="1">
<div id="2">
<div id=3">
Texten här
</div>
</div>
</div>

#1 = det blåa, med repeat-y på bakgrunden.
#2 = Det röda, med bakgrund överst, med no-repeat.
#3 = Det gröna, med en bakgrund med background-position: 0 bottom;

i CSS3 tror jag dock man ska kunna ha flera bakgrundsbilder i samma div, men det dröjer väl ett par år innan man vågar använda det.