Layering content on content in CSS?

[wickedmoon]

I want to set up some boxes in CSS with images at the top and bottom and the text and other page content overlaying those images. I've set up what it might look like (without images) at http://wickedmoon.com/wickedmoon_test.php. The images create a border at the top and bottom of each box, similar to the skins at bebo.com. The images will have flat sides, so they can tile seamlessly to the right to fit the browser window. The images fade into the centre of the box, which has a flat background colour. As more content is added to the box, you see more of the flat colour, but the box is always tipped at the top and bottom with the images.

I wanted to float the content of a box over its entire area and wondered if this is possible? The content would begin over the top image, continue down over the flat colour and finish covering the bottom image in the box. The content could be anything, so you'd have images overlaying the images that form the top and bottom of each box.

Jason

[MikeHopley]

Just use CSS background images for the top and bottom. You can only use one image per element, so you may need to add an extra wrapper <div>.