Grow your CSS skills. Land your dream job.

background z-index css

  • # July 10, 2013 at 8:06 am

    Hello.

    I am still getting use to multi class.

    The question is.

    if I have a container and has content inside which has own backgounds.
    When I first tried to set background to container it went straight through header and block header out.and footer etc.

    if i do this div id=container mainbackground close div what z-index number is best to bring #mainbackground to rear.

    #container {
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    z-index: 2;
    }

    #mainbackground {
    backgound:#FFFFFF;
    z-index: 1;
    }

    # July 10, 2013 at 8:52 am

    Put your code in Codepen.io so we can get a better idea what you’re trying to do and what’s going wrong.

    # July 10, 2013 at 10:31 am

    Do as @Senff said cause I am little confused as to what you want to do. I use sometimes different backgrounds for some divs if required and for this I develop classes like, example:

    .bg-color-blue {background:#368;}
    .bg-color-black{background:#000;}

    # July 10, 2013 at 10:32 am

    You’re trying to give a div two IDs which is not correct.

    # July 10, 2013 at 6:05 pm

    You can’t give a div more than one ID. Instead, use classes.

    So to fix that, do:



    .container {
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    z-index: 2;
    }

    .mainbackground {
    backgound:#FFFFFF;
    z-index: 1;
    }

    Also, I don’t understand what you’re trying to achieve here. Why don’t you just give the .container a background colour instead of using two classes?

    Z-index can get messy if you try to use it like this.

    Another thing too. Z-index requires the element to be positioned with either position:absolute;, position:relative; or position:fixed; – It is useless to use z-index on a non-positioned element.

    Just remove z-index from the equation (as it is really not necessary) and use classes instead of ID’s. The same ID can only be used once per HTML file. Classes are reusable and sustainable.

    # July 11, 2013 at 12:30 am

    I did it this way div id = “container” class=”backgroundwrapper”> Added z-index 2 to container and background with z-index 1 it worked some thing easy fix.

    #container {
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    z-index: 2
    }
    .backgroundwrapper {
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    z-index: 1;
    background: #FFFFFF;
    }

    # July 11, 2013 at 12:51 am

    As @JamesMD pointed out, z-index doesn’t work on elements positioned static by default. Set the position of one to relative and the other to absolute. Then set your z-index as you want.

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".