How a div can be resized by it's content if it's positioned?

[Walk On LIfe]

Hello,
I have this problem: I have a background-image of three parts because the picture is not square and has shadows. This is the design, the middle picture must be resized if there is more text inside a div #textarea.

#bigframe{
height: 100%;
border: 1px solid yellow;
position: absolute;
left: 25px;
top: 46px;
}
#bigframe1{
background-image:url(images/bigframe1.png);
background-repeat:no-repeat;
width:534px;
height:21px;
vertical-align: top;
margin:0px;
}
#bigframe2{
background-image: url(images/bigframe2.png);
background-repeat: repeat-y;
width:534px;
height:100%;
}
#bigframe3{
background-image:url(images/bigframe3.png);
background-repeat:no-repeat;
width:534px;
height:22px;
vertical-align:bottom;

}
These are the three parts of a complicate picure and this is the div placed in #bigframe2 (in the middle - the background it's just fex pixels height and must repeats until the content inside finish:

#textarea{
position:absolute;
left: 15px;
top: 15px;
}
But when there is more text it's going out of the #bigframe
limits. So how can I make it stay inside and resize the div?

Thanks a lot to everybody that turn attention to my problem.

[ratman7]

Would using an <img> tag to insert the image instead of a background image work?

[Xapti]

The current level of CSS does not support stretching background images. You will have to manually put an image behind your content (and obviously set it's relative size or boundaries) to get that effect.