0

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

Yogesh Bhatt
  • 127
  • 2
  • 9
  • *I also don't understand the purpose of setting height of html and body. Don't they by default cover the complete viewport?* --> no they don't, both need to be explicitely set to 100% to cover the viewport height BUT I suppose you don't have a doctype added to your code and you are failing into quirks mode where it's different: https://stackoverflow.com/q/32214152/8620333 – Temani Afif Jun 16 '20 at 19:44
  • @TemaniAfif Okay. And I have doctype already in my code. But my original question still stays. Why does background-image show fully when html's height is set to 100%? My question has been marked as duplicate unfortunately. I didn't find my answer on the duplicate link. Here https://ygshbht.github.io/parallaxWebsite/. with html and body height defined, and here https://ygshbht.github.io/parallaxWebsite2/. with at least one not. – Yogesh Bhatt Jun 16 '20 at 19:55
  • the duplicate explain how percentage works and both your examples confirms that the duplicate is what you need here. Missing one height:100% will break everything because you missed a reference. From the duplicate: *To set a percentage height, its parent element must have an explicit height.* – Temani Afif Jun 16 '20 at 19:57
  • @TemaniAfif My bad. 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 – Yogesh Bhatt Jun 16 '20 at 20:12

1 Answers1

1

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.

charles
  • 1,814
  • 2
  • 13
  • 19
  • Thank you, now I understand the default values and the code snippet was helpful. But i still don't understand how setting html and body's heights to 100% causes background-image to resize their container. I have added links in my question that show code output – Yogesh Bhatt Jun 16 '20 at 20:06
  • My bad. 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. – Yogesh Bhatt Jun 16 '20 at 20:13