Problem in arranging CSS Sprites and repeating backgrounds

Question

Hello all

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 its already being set in parent container?

With regards Vikram

Answer 1

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

Answer 2

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