I'd like to create a page header that would look like the image I've linked to, where the grey boxes would be pictures. The pictures would be randomly selected from a set of 10 or so -- I can handle that step with PHP. My design is fixed width, so the wrapper container will remain constant and equal the width of the header at all times.

http://74.52.119.146/~emilford/header.jpg

My thought is to have a larger version of this image as a div background and then use CSS and absolute positioning to align pre-rotated and sized images over the grey boxes. I've never used absolute positioning, but I've seen in examples where you can position things using top: left:, etc. With my relative newbie knowledge of using CSS for positioning, this is the best solution I could come up with. Before I head down this path, is there a better solution?

I'd also like to extend the bottom borders (orange) and potentially include text there, but not at the cost of having to create new images. As far as I know, this (the orange borders and writing slanted text) couldn't be done with CSS.

So to recap, I'd create a correctly sized version of the background image and use it for a div, as well as various images, cut, shaped, and sized to hover over the different grey boxes, use PHP to select a random (for the correct position) image, and then use absolute positioning to position it correctly.

Thoughts?