CSS - Conseils pour cette stratégie de mise en page? Trois couches de fond

Question

J'ai donc ce webdesign que je suis en train de mettre en place avec CSS et je me bats un peu sur la mise en page CSS de divs.

Les choses sont, je veux un fond principal. Puis une couche au-dessus de celle-ci avec une image png semi-transparente pour simuler l'ombre. Et pour couronner le tout, je veux une autre image png semi-transparente, seulement centrée. Et puis un en-tête et un pied de page.

Je pensais quelque chose dans les lignes de ce quand il vient à DIVs:

• Wrapper (fond principal)
  • Shadow (couche sur fond principale)
    • tête
    • png centré comme arrière-plan
      • Contenu principal
• Pied de page

Ce que je me demande vraiment, comment voulez-vous les gars y parvenir? Et comment positionneriez-vous chaque élément?

Je voudrais utiliser cet exemple comme point de départ, si ce n'est pas impossible de le faire .. http://ryanfait.com/sticky-footer/

Voici mon code CSS jusqu'à présent (Désolé, ne parvenait pas à utiliser un bloc de code)

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

Juste mis à jour le code. Je vais essayer de travailler un peu avant de poster une mise à jour. D'accord, le CSS fonctionne maintenant! :)

Answer 1

Quelque chose comme ça peut-être?

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>