Organisation de sprites CSS et de répétitions d'arrière-plans

Question

J'essaie de travailler avec CSS Sprites pour ma webapp. Voici ma mise en page web:

<div id="container"> 
    <div id="header" /> <!-- part of CSS sprite --><br /> 
    <div id="content" /> <!-- repeats vertically, separate image --> <br /> 
    <div id="separator"> <!-- part of CSS sprite --><br /> 
    <div id="footer"> <!-- part of CSS sprite --><br /> 
</div> 

J'ai essayé d'utiliser cette css:

#container { 
    background: url(../img/sprite.png) no-repeat top; 
    margin: 0px auto; 
    width: 800px; 
} 

#container #header {<br /> 
    background-position: 0px 0px; 
    height: 25px; 
} 

#container #content {< 
    background: url(../img/content.png) repeat-y; 
} 

#container #separator { 
    background-position: 0px -25px; 
    height: 25px; 
} 

#page-container #footer { 
    background-position: 0px -50px; 
    height: 25px; 
} 

Ce qui se passe plus ici est que seuls les deux premiers divs s'affichent (en-tête et le contenu). Le séparateur et le pied de page ne sont pas affichés. La vérification dans Firebug révèle qu'ils sont là, mais ne sont pas affichés.

L'ajout de cette ligne fait l'affaire:

#container, #header, #footer, #separator { 
    background: url(../img/sprite.png) no-repeat top; 
} 

Alors pourquoi est-ce qui se passe? Ai-je besoin de mettre une image de sprite dans chaque div Je l'utilise même s'il est déjà défini dans le conteneur parent?

En ce qui concerne Vikram

Answer 1

La propriété de fond n'est pas hérité (imaginez ce qui se passerait si elle était). Vous pouvez le mettre dans chaque div où vous l'utilisez. Ou peut-être utiliser l'image de fond: inherit; Règle CSS

Answer 2

Essayez & changement

<div id="separator"> <!-- part of CSS sprite --><br /> 
    <div id="footer"> <!-- part of CSS sprite --><br /> 

to 

    <div id="separator"/> <!-- part of CSS sprite --><br /> 
    <div id="footer"/> <!-- part of CSS sprite --><br />