How should I structure this? [large images]

I'm making this image-heavy layout and I'm wondering what the best way, code-wise, to structure the page is. I'd like the whole thing to be centred.

Here's what it looks like:


Ignoring the top part for now, I have 3 background pieces for the lower section. (and ignore the awkwardness of the centre of the images, that will be covered up anyway)







So this is what I've come to.

Option 1
The top part stays at the top, bottom stays on the bottom of the screen, and the middle part repeats. In this case, the middle can just be a solid colour. Then I'd have to make the content and navigation boxes on top of the backgrounds. (Negatives to this option -- the left box is semi-transparent, and both boxes have shadows around them, which I'd prefer to keep)

Option 2
I remake all of these images WITH the content and navigation boxes as part of each one. In this case, the middle would have to be a repeating image.

So I'm stuck, because I don't know how to employ either of these options effectively. Do you have any idea how I can make it work?

I would do it differently than you've described.
Make the left-hand side of the page a repeating pattern, and make the picture wide enough that 1600 browsers will still render it correctly.



Then, make everything under the heading bar encased in a separate div

I'm sorry, I don't quite understand what you mean.

Which part would you like further explanation on?

I think I'd do it as follows:
I'd put the top blue part inside a div {header div}
I'd then add a second div beneath the header div {body div}
Then I'd add three divs inside the body div each with "float:left" (left div,center div and right div)
Below those I'd add a div with "clear:both" (clearer div)

With that you'll have a basic layout going already ... then you could also do the following:
Add a div for the menu inside the header div (menu div)
Add a div for that "text here" part and add it below the header div (text_here div)

And now it depends if you are going to use the left hand side menu's half-transparent part as an image or as a half-transparent div how you'll tackle that part ...

And obviously another div around everything to keep it all centerd (container div)

Oh, I just can't picture/imagine how it works, sorry.