The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

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.



    background:#ffffff url(“image1.jpg”) scroll left top;

    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


    # December 27, 2012 at 9:24 am

    This reply has been reported for inappropriate content.

    @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 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


    # 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

    This reply has been reported for inappropriate content.

    @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


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

    my warmest regards


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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed