CSS - 这种布局策略的提示？三个背景层

Question

所以我有这个网页设计我正在尝试与CSS放在一起，我在div的CSS布局上挣扎了一下。

事情是，我想要一个主要背景。然后用一个半透明PNG图像顶层的图层来模拟阴影。最重要的是，我想要另一个半透明的PNG图像，只有居中。然后是页眉和页脚。

我想在此线的东西，当涉及到的DIV：

• 包装（主要背景）
  • 阴影（在主要背景的顶层）
    • 头
    • 居中PNG作为背景
      • 主要内容
• 页脚

我真正想知道的，怎么会你们实现这一目标？ 你将如何定位每个元素？

我想用这个例子作为一个起点，如果这不是不可能做到.. http://ryanfait.com/sticky-footer/

这里是我的CSS代码到目前为止（对不起，无法管理使用代码块）

 
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; 
} 

刚刚更新了代码。在发布更新之前将尝试解决这个问题。 好的，CSS现在可以使用！ :)

Answer 1

也许这样的事情？

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>