Question

I am trying to make a website using parallax.

I am having troubles with CSS. Below is the HTML:

<div id="skrollr-body">

        <div class="subnav"> 
            <ul  id="nav">
                <li><a href="#home">Home</a></li>
                <li><a href="#foo">Foo</a></li>

            </ul> 
        </div>


            <div id="home" class="centered" data-0="height:100%;" data-1000="height:0%;" > 
                <div class="zebra">
                     <div class="contentWrap">

                          test

                     </div>         
                </div> 
            </div>


            <div id="foo" class="centered" data-1000="height:100%;" data-2000="height:0%;">
                <div class="world">
                         <div class="contentWrap">

                              test

                         </div>         
                 </div> 

            </div> 
</div>

and here is the css:

#home {  
    background: #dedede;
    height: 100%;
    z-index: 901;
} 
#foo{background: yellow; z-index:800;}  

.zebra {
    background-image: url("/img/zebra-pattern.png");
    background-position: center center;
    background-repeat: repeat-x;
    background-size: cover;
    height: 100%;
    position: relative;
    width: 100%;
}

.world {
    background-image: url("/img/world.jpg");
    background-position: center center;
    background-repeat: repeat-x;
    background-size: cover;
    height: 100%;
    position: relative;
    width: 100%;
}

.contentWrap{ 
    position: absolute; 
    border: 1px solid red;
}

My problem is if i dont put height explicitly, background image is not becoming full screen.

any advice?

Answer 1

For a percentage height to work on any element, it’s parent must have some kind of height set on it. That parent’s height can be a percentage too, but, in that case, for that percentage to work, it’s own parent must also have some kind of height set on it. And this goes all the way up to the html element.

In your case, if #skrollr-body is a/the direct child of the body element, you must include this in your stylesheet:

html,
body, 
#skrollr-body {
    height: 100%;
}