2

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>
MaxiGui
  • 6,190
  • 4
  • 16
  • 33
Pulkit Sharma
  • 390
  • 2
  • 14
  • can't see and background here – Aman Sharma Oct 14 '21 at 06:46
  • 1
    I made a snippet and changed your code to `.bgcolor { background-color : red; }` to show the issue – mplungjan Oct 14 '21 at 06:48
  • that would be due to the browser's default CSS - in Chrome I see `body { display: block; margin: 8px; }` – mplungjan Oct 14 '21 at 06:49
  • You're not establishing any other attributes? like height, width, display, etc... – Antony Sanders Oct 14 '21 at 06:50
  • This will simply Answer your Queries [Giving background-color to body applying whole page. Why?](https://stackoverflow.com/a/44301236/15405352) – Anil Parshi Oct 14 '21 at 06:57
  • but height is zero than how can the complete screen becomes red. – Pulkit Sharma Oct 14 '21 at 07:02
  • 1
    Does this answer your question? [Giving background-color to body applying whole page. Why?](https://stackoverflow.com/questions/44300463/giving-background-color-to-body-applying-whole-page-why) , [Background-Color of BODY tag applied to the whole HTML](https://stackoverflow.com/questions/17806691/background-color-of-body-tag-applied-to-the-whole-html), [Other duplicate](https://stackoverflow.com/questions/10947541/applying-a-background-to-html-and-or-body) + [W3 Doc](https://www.w3.org/TR/CSS2/colors.html#:~:text=The%20background%20of%20the%20root,not%20paint%20this%20background%20again.) – MaxiGui Oct 14 '21 at 08:05

1 Answers1

-2

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;
}
Gaurang Sondagar
  • 814
  • 1
  • 9
  • 23