CSS- multiple background image

Question

Hey. I want to put multiple background image in css at different position(like at diff px. and at diff z-index.) Is that possible in body tag. i mean all images in body tag. or with diff ids.?

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

and for each class i want to add a background image . please correct the code. and add background image in all clases above

Answer 1

In CSS 3 you can use multiple backgrounds. But it isn't widely supported yet. Like

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;

See multiple backgrounds

You can use different containers (div) and set the background images for them.

Answer 2

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

am not getting it..please correct this

Answer 3

My problem is not yet solved. i want to know how to call css classes in HTML. Help for above code.

Answer 4

you can't there is no default width and height.

Only if the image is in the div eg. <div> <img src='image.jpg'> </div> the div takes the size of the image. But even then I'm not sure if this will happen to the absolute divs.

Use like rahul suggested css3 or give the divs (as I said before) a width and a height.