Forums

andreea115

Hi everyone.

How do i place multiple background images in the same div tag ( or in the same area). i don't want to use CSS3 as some of the viewers are still using old browsers.

i will explain my problem.

i have used a div tag for the entire page and placed a background image behind it.

eg;

entirepage{

background:#ffffff url("image1.jpg")   scroll left top;
height:1000200px;
}

However i then have several div tag for the navigation etc ; some of these div tag need to have background images of their own ( i am using CSS SPITE) ; but this will mean that these new background images will have to be on top of the background image for the entire page.

so, my question now is this; how can i do that?

warm regards

Andreea

ChrisP

@andreea15, each div can have their own background

  .pageWrapper {
      background-image: url("page-background.png");
  }

  .navigation {
      background-image: url("navigation-background.png");
  }

  .content {
      background-image: url("content-background.png");
  }

That is just fine, although that's too many images for me..it still works

andreea115

hi ChrisP

thank you very much for your advice. i will give it a try.

warm regards

andreea

andreea115

sorry. one question.

how do we determin which background image goes on top of the other. do we use the Z index for background images

knittingfrenzy18

You can't use z-index on background images, but you can on the elements.

Remember that you must put a position other than static on the elements for z-index to work.

ChrisP

@andreea115, they layer in the order they're nested. .navigation will sit on top of .pageWrapper on it's own, so you don't need to worry about z-index

andreea115

Wow.

thanks Guys. u guys have been brilliant. You have really cleared that up for me.

my warmest regards

Andreea

treehouse : what would you like to learn today?

Forums

How do i add multiple background images to the same div tag ( i dont want to use CSS3)

entirepage{