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>