Search code examples
htmlcssheightbackground-image

Why does background-image show fully when html's height is set to 100%?


I was seeing this video by Traversy Media where he shows how to make a parallax website. At this point he selects html as well as body tag. I thought what could be the difference, and adding html with body tag would be redundant as html only has body and head in it, and since we are styling body, everything we want to style, gets styled just by selecting body. So I didn't write "html" in my code initially, and the result: background images were just covering the background of element and extra part was hidden (which should have been expected as per my code, but I was wondering why our results differed. Then i realized that my code was working as it should and his differently). Then I realized that there is difference between selecting body and selecting html (i still don't know the difference). So I wrote code after body for selecting html, and set html's height to 100%. Now I was getting what was shown in the video. But I don't understand how. Basis on my knowledge, this shouldn't have made a difference as "body" has it's height set to "100%" in the code. And when I removed height of body, it was working just like before i.e. background images were only covering the element, even though html's height was set to 100%. I also don't understand the purpose of setting height of html and body. Don't they by default cover the complete viewport?

(This is my first question, please let me know if I need to make any changes to the question to make it answerable)

Edits: Links added, added ".pimg1, .pimg2, .pimg3{background-attachment: fixed;}" on the first code snippet, add second code snippet (expected result but undesired)

My code which causes it to work how i intend to (desired but non-understable) (Preview):

   body{
    height: 100%;
    margin: 0;
    font-size: 16px;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    line-height: 1.8em;
    color:#666;

}

html{
    height: 100%;
}

.pimg1, .pimg2, .pimg3{
    background-attachment: fixed;
}

.pimg1{
    background-image:url('../img/image1.jpg');
    min-height: 100%;
}

.pimg2{
    background-image:url('../img/image2.jpg');
    min-height: 400px;
}

.pimg3{
    background-image:url('../img/image3.jpg');
    min-height: 400px;
}

Code that i wrote initially (expected but undesired) (Preview)

body{
    margin: 0;
    font-size: 16px;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    line-height: 1.8em;
    color:#666;
    height: 100%;
}



.pimg1, .pimg2, .pimg3{
    background-attachment: fixed;
}

.pimg1{
    background-image:url('../img/image1.jpg');
    height: 100%;
}

.pimg2{
    background-image:url('../img/image2.jpg');
    min-height: 400px;
}

.pimg3{
    background-image:url('../img/image3.jpg');
    min-height: 400px;
}

p{
    font-size:30px;
}

Solved: I was editing the container div's height and thought that i was just editing the background-image's height. So illogical of me. I understand now. Thanks https://stackoverflow.com/users/897416/charles and https://stackoverflow.com/users/8620333/temani-afif


Solution

  • If you do not define the height of html but define a percentage height on body then that value is computed to auto.

    From height (MDN):

    The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.

    Alternatively, you can use viewport units (e.g., vh). For example:

    .pimg1 {
      background-image: url("../img/image1.jpg");
      min-height: 100vh;
    }
    

    … then you don't need to define the height on either html or body.