CODEWITHSUNDEEP
cssimage
user269751
user269751

Reputation: 39

CSS- multiple background image

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

Upvotes: 2

Views: 8727

Answers (3)

Tim
Tim

Reputation: 9489

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.

Upvotes: 0

user269751
user269751

Reputation: 39

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

Upvotes: 0

rahul
rahul

Reputation: 187110

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.

Upvotes: 7

Related Questions