Basically I was wondering what the tidiest and best approach is to coding a design that requires a 100% width header but with all of the content actually inside a fixed width. Also with an image for the both the header background and the main background.

 

I can't show the actual design so here is a mockup example of what I mean:

 

The actual header parts just have a gradient and grain so that can be made up of a 1px wide image with repeat-x top left applied but the main image is a non-tilable photo like the example. All of the content would be inside the 980px fixed width section.

 

So, how would you go about that basic layout? I've done it before with a solid background on the main page but I've never tried to do it with an image for the header and main section before. I can think of a few ways to go about it but would like to hear some of your tips for the most effective way.

 

(X)HTML by the way, not fully on with HTML5 yet.

Without seeing your code, I can only make suggestions and they may not work for you.

You could make your content div the width of your main photo and give it a fixed width, margin: auto; position: relative; to center it in a larger width window. Just before that div in the markup, have a separate div with width: 100% and the repeating header image, but they would be separate divs.

 

OR

 

Create a div width: 100% with the header background image and then put another div inside with a fixed width the same as the photo and margin: auto; and position: relative;