CSS - Tips for this layout strategy? Three background layers

Question

Hi, so I've got this webdesign I'm trying to put together with CSS and I'm struggling a bit on the CSS layout of divs.

Things is, I want a main background. Then a layer on top of that with a semi-transparent png image to simulate shadow. And on top of that again, I want another semi-transparent png image, only centered. And then a header and a footer.

I was thinking something in the lines of this when it comes to DIVs:

• Wrapper (main background)
  • Shadow (layer on top of main background)
    • Header
    • Centered png as background
      • Main content
• Footer

What I'm really wondering is, how would you guys achieve this? And how would you position each element?

I would like to use this example as a starting point, if that's not impossible to do.. http://ryanfait.com/sticky-footer/

Here's my CSS code so far (Sorry, couldn't manage to use a code block)

html, body {
    margin:0;
    padding:0;
    height:100%;
}

#wrapper {
    background-image:url(img/Full/BrownPattern.jpg);
    background-repeat:repeat;
    height:100%;
    min-height:100%;
    padding-bottom:30px;
}
#shadow {
    background-image:url(img/Full/BGShadow.png);
    background-repeat:repeat-x;
    height:100%;
    min-height:100%;
    padding-bottom:30px;

}
#header {
    height: 58px;
    background-image:url(img/Full/TopLine.png);
    background-repeat:repeat-x;
}
#contentBg {
    background-image:url(img/Full/Fridge.png);
    background-repeat:no-repeat;
    background-position:center;
    height:100%;
    min-height:100%;
}
#footer{
    Height:100px;
    background-color:#666666;
}

Just updated the code. Will try to work it out a bit before posting an update. Okay, the CSS works now! :)

Answer 1

Something like this maybe?

CSS:

#wrapper {
    background: url('bg.png') repeat-x top; /* here I choose to repeat-x */
}
#shadow {
    background: url('shadow.png') repeat-x top;
}
#header {
    height: 100px;
}
#contentBg {
    background: url('contentbg.png') no-repeat top center;
}

HTML:

<div id="wrapper">
    <div id="shadow">
        <div id="header"></div>
        <div id="contentBg">
            <div id="content"></div>
        </div>
    </div>
</div>
<div id="footer"></div>