Question

So, maybe I just suck at searching, but I’m having real trouble finding a method to do this, so here goes…

I have a webpage with a fixed image background (tiled, non scrolling).
I now want to have a colored div on top of that (700px wide, 100% height, centered) that I can then put more content within (doesn’t necessarily have to be a div, I just want a colored area in the center.)

Here’s an image of what I’m working towards: http://bit.ly/g5qgj0
The lightly colored area (on top of which lies everything else) is what I’m trying to achieve.

Thanks in advance, I’m still getting to know HTML/CSS and this has been driving me crazy XP

Answer 1

html, body{
    margin:0;
    padding:0;
    height:100%;
}
body{
    background:transparent url(...) repeat 0 0;
}
div{
    margin:0 auto;
    width:700px;
    height:100%;
    background:white;
}

Check working example at http://jsfiddle.net/TGt4A/