Expandable background image

[remp]

Hello everyone,

I have a situation with a background image, im want to show an image in the top section of the background and make the bottom expandable in case the div increases in height.

What i have so far is:


<div id="wrapper">
<div id="middle">
Content
</div>
</div>




#wrapper {background: background:url("../images/top.png")no-repeat;}
#middle {background-image:url(../images/middle.png) repeat-y;


Now, the problem with this is that the background image will be cut out at about 20px from the top and not show the rest of it because its covered by the middle section image.

in addition to that, i cannot add the "middle" image to the wrapper because the "top" image is a transparent div and it would show the middle image in the back anyways.

I have attached an image to try to help explain it. What do you guys think is the best way of handling this issue??

Appreciate your help in advance.

[csscoder]

Hello,
How about if you create anothe div into middle div ?

[remp]

im not sure how well that would work, because the text would actually have to be inside of the middle>another div and it would cover the wrapper background.
i need to wrapper background to be visible 100% and then on, it would be the bottom part that would show as background when the wrapper is expanded in height.

Is there any other way of accomplishing this??

[deathbycheese]

Instead of repeat-y, can you do this:

#middle {background-image:url(../images/middle.png) left top no-repeat;

If your image's size is equal to the #middle div this should 'seat' the image at the top. Or you might try overflow:hidden if it's too big.