CSS-фоновое изображение

Question

Эй. Я хочу поместить несколько фоновых изображений в CSS в разных местах (например, в разном px. Это возможно в теле тега. Я имею в виду все изображения в теге тела. или с разными идентификаторами .?

body    {background-image:url(img/banner.png);
     background-position: 50% 49px;
     background-repeat:no-repeat;
     background-color:#000000}

.nav {position:absolute;
top:267px;
left:149px;
z-index:1}

.home   {position:absolute;
     top:281px;
     left:285px;
     z-index:2;}

.event  {position:absolute;
     top:281px;
     left:389px;
     z-index:2;}

.sponsors{position:absolute;
     top:281px;
     left:493px;
     z-index:2;}

.about  {position:absolute;
     top:281px;
     left:597px;
     z-index:2;}

.register{position:absolute;
     top:281px;
     left:701px;
     z-index:2;}

.more   {position:absolute;
     top:281px;
     left:805px;
     z-index:2;}

.box    {position:absolute;
     top:1163px;
     left:157px;
     z-index:1;}

и для каждого класса я хочу добавить фоновое изображение. пожалуйста, исправьте код. и добавить фоновое изображение во всех пунктах выше

Answer 1

В CSS 3 вы можете использовать несколько фонов. Но пока что это широко не поддерживается. Как

background: url(body-top.gif) top left no-repeat, 
            url(banner_fresco.jpg) top 11px no-repeat, 
            url(body-bottom.gif) bottom left no-repeat, 
            url(body-middle.gif) left repeat-y;

См. несколько фонов

Вы можете использовать разные контейнеры (div) и устанавливать для них фоновые изображения.

Answer 2

вы не можете, нет ширины и высоты по умолчанию.

Только если изображение в div, например. <div> <img src='image.jpg'> </div> div принимает размер изображения. Но даже тогда я не уверен, произойдет ли это с абсолютными делами.

Используйте, как предложено Рахулом css3, или задайте div (как я уже говорил) ширину и высоту.

Answer 3

body    {background-image:url(img/banner.png);
     background-position: 50% 49px;
     background-repeat:no-repeat;
     background-color:#000000}

.nav {background-image:url(img/button.gif);
position:absolute;
top:267px;
left:149px;
z-index:1}
.home   {background-image:url(img/button.gif);position:absolute;
     top:281px;
     left:285px;
     z-index:2;}

.event  {background-image:url(img/button.gif);position:absolute;
     top:281px;
     left:389px;
     z-index:2;}

.sponsors{background-image:url(img/button.gif);position:absolute;
     top:281px;
     left:493px;
     z-index:2;}

.about  {background-image:url(img/button.gif);position:absolute;
     top:281px;
     left:597px;
     z-index:2;}

.register{background-image:url(img/button.gif);position:absolute;
     top:281px;
     left:701px;
     z-index:2;}

.more   {background-image:url(img/button.gif);position:absolute;
     top:281px;
     left:805px;
     z-index:2;}

.box    {background-image:url(img/button.gif);position:absolute;
     top:1163px;
     left:157px;
     z-index:1;}

не получаю .. исправьте это