CSS background image help required

[xyphic]

Hi all,

I'm trying to do something rather complicated. I have an image (of a book) which I am trying to make stretch vertically to fit its content. Prior to this, I simply had the book as the background image of a div with the content in the div. That worked, but I've got to the point where I need more space!

So, I've created three parts of the book image. The top (a large ~300px tall image), a central piece (64px tall, tileable) and the bottom piece (again, about 300px tall). What I'd like to do is make it so that the content sits on the top piece, and if it overflows the tile will come into effect. The bottom piece won't contain any content.

An illustration:

The blue band at the top represents the top of the book. The purple bands represent the tile and the pinky band represents the bottom of the book. The light blue is the content. Any ideas how I could do this? I've tried all sorts and I'm pretty stumped!

(One idea I thought might work would be to contain the top piece and the tile within a div each, both of which are contained in a single div. The content would be in the top-level div also -- but I haven't been able to get it so the content sits on top. Frustrating!)

Cheers,
xyphic

 

[xyphic]

Sorted it (in a round-about manner). FWIW, I made it so that it had this sort of arrangement:

<div id="book-container">
   <div id="book-top">
      <!--- Content here --->
   </div>

   <div id="book-bottom">
      <!--- Footer stuff here --->
   </div>
</div>

The book-container style had the tile as its background image repeating in the y-direction. The top and bottom of the book sit on top of this, with a gap in the middle where the content causes book-top to stretch. There's no repeat on book-top so the tile shows through from underneath, filling in the gap.

Not pretty, but it seems to work!