CSS - Советы по этой стратегии макета?Три фоновых слоя

Question

поэтому у меня есть этот веб-дизайн, который я пытаюсь соединить с CSS, и я немного борюсь с CSS-макетом div-ов.

Вещи, я хочу основной фон. Затем слой поверх этого с полупрозрачным изображением png для имитации тени. И опять же, я хочу еще одно полупрозрачное изображение PNG, только по центру. А затем заголовок и нижний колонтитул.

Я думал что-то вроде этого, когда речь шла о DIV:

• Обертка (основной фон)
  • Тень (слой поверх основного фона)
    • Заголовок
    • Центрированный PNG в качестве фона
      • Основное содержание
• Footer

Что мне действительно интересно, так это как бы вы, ребята, достигли этого? И как бы вы расположили каждый элемент?

Я хотел бы использовать этот пример в качестве отправной точки, если это не невозможно сделать .. 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>