Forums

Give help. Get help.

  • # 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 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 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag