Организация CSS спрайтов и повторяющихся фонов - PullRequest
Новая
       12

Организация CSS спрайтов и повторяющихся фонов

1 голос
/ 04 июня 2010

Я пытаюсь работать с CSS Sprites для моего веб-приложения. Вот мой веб-макет: 

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

Я пытался использовать этот 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;
}

Что здесь происходит, так это то, что отображаются только два верхних элемента (заголовок и содержимое). Разделитель и нижний колонтитул не отображаются. Проверка в Firebug показывает, что они есть, но не отображаются.

Добавление этой строки делает трюк: 

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

Так почему это происходит? Нужно ли помещать спрайт-изображение в каждый div, который я использую, даже если он уже установлен в родительском контейнере?

С уважением Викрам

Ответы [ 2 ]

6 голосов
/ 04 июня 2010

Свойство background не наследуется (представьте, что будет, если бы оно было). Вы можете поместить его в каждый div, где вы его используете. Или, может быть, использовать background-image: наследовать; Правило CSS

0 голосов
/ 04 июня 2010

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