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.