Search code examples
htmlcssinheritancebackground-colordocument-body

why does background-color property fills the entire screen even body have 0 height?

Can anyone explain why the background color is filling the entire screen even when body is having zero height?

.bgcolor { 
  background-color : red;
  height:0;
}
<body class="bgcolor"></body>

Solution

  • body tag is always taking the whole document's body, so if you want to give background with limited height then put one DIV inside the body tag and then give specific height, then it will work fine.

    so for the solution, please give background color to HTML div as well.

    html {
  background-color: #ffffff;
}