Struggling with CSS, There is probably a sinple fix but ive tried a few things and not come up with much

I want a Dynamically expanding text box with images showing the start and end.

I figured the best way is split in to 3 slices, 1 containing the top, 1 containing the repeating image, One containing the bottom,

Text should run though all 3, So ive got 3 Divs and ive made a parent div for them looking similar to

<div id="newstext">
<div id="newstop"> </div>
<div id ="newsrept"> <div>
<div id="newsbottom"> <div>
</div>

With newstext set up with just a width, News top and bottom set up with width and height, And newsrept set up with min-height and a width.


Is this the best set up or is there some clever CSS Trick im missing ?

Edit:

I cant make it work any way i try

Photoshop output, I knew CSS was one of them languages i should learn better

__________________

Figured it out,

Parent has the repeating element, Top and bottom use top:0 and bottom:0.

Text goes in top and top has a higher z-index than bottom

__________________