Grow your CSS skills. Land your dream job.

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

  • # December 27, 2012 at 8:48 am

    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

    # December 27, 2012 at 9:24 am

    @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

    # December 27, 2012 at 9:49 am

    hi ChrisP

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

    warm regards

    andreea

    # December 27, 2012 at 10:05 am

    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

    # December 27, 2012 at 10:25 am

    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.

    # December 27, 2012 at 10:33 am

    @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

    # December 27, 2012 at 11:19 am

    Wow.

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

    my warmest regards

    Andreea

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".