Arranging CSS Sprites and repeating backgrounds

I am trying to work with CSS Sprites for my webapp. Here is my web layout:

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

I tried using this 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;
}

What happens over here is that only the top two divs get displayed (header and content). Separator and footer do not get displayed. Checking in Firebug reveals that they are there, just not getting displayed.

Adding this line does the trick:

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

So why is this happening? Do I need to put sprite image in every div I use it in even if it's already being set in parent开发者_运维问答 container?

With regards Vikram

The background property is not inherited (imagine what would happen if it were). You can put it in every div where you use it. Or maybe use the background-image: inherit; CSS rule

Try & Change

  <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 />