Menu
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;
}
492
that is because you have set the background color, and then overwritten it by using the background shorthand…. either move the background-color call after the background shorthand, or add it TO the shorthand… the browser interprets your current code like this…
To set the background color in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <body> tag, with the CSS property background-color. HTML5 do not support the <body> tag bgcolor attribute, so the CSS style is used to add background color.
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.
51
Try changing height to min-height on your body element. This will make the body element to be 100% is the content is too short to fill the whole thing, and grow when the content is larger than the browser.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
