My body background color disappears when scrolling

css, document-body, html, vertical-scrolling

Solution

If your body is set to `height: 100%`, then it will be 100% of the window, which is not ideal since the background on longer pages will get cut off, as you mentioned. Take off the height property and you should be set.

You can also set `height: 100%` on both `html, body` and then create a container within your `body`. Then move your `html` styles to `body`, and your `body` styles to the new container.

This is preferred, since it is not generally considered best practice to set a pixel width on your `body` element.

HTML

<body>
  <div id="container">Your well-endowed content goes here.</div>
</body>

CSS

html, body {
  height: 100%;
}
body {
  background: #07ade0;
}
#container {
  background: #7968ae;
  width: 900px;
  margin-left: auto;
  margin-right: auto;   
  font: 20px verdana, "sans serif", tahoma;
  overflow: hidden;
}

See DEMO.

Problem

I hope someone can help. I've set my body height property to 100% which is fine when all the content is on the screen at one time. However when i need to scroll (when minimizing the window) the body color disappears, leaving just the color i set for the HTML background. Does anybody know a solution? ``` html { background-color: #07ade0; } body { background-color: #7968ae; width: 900px; margin-left: auto; margin-right: auto; font: 20px verdana, "sans serif", tahoma; } ```

Original source