Menu
I am having an issue where the background color is behaving unexpectedly when the viewport is shrunk to a size smaller than that specified for some of my elements. While the scroll bars appear correctly the background is not what I would expect. When the viewport is as large or larger the backgrounds behave as intended. When inspecting the page elements with Firebug it seems that the body element is not stretching even though content inside of it is. What's causing the backgrounds to behave this way?
I've provided what I believe to be the pertinent html and CSS, but if I've omitted something please let me know.
Shrunk Viewport Example
Enlarged Viewport Example
CSS
html
{
background: #A37C45;
}
body
{
background:
#55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0;
}
#container
{
width: 100%;
}
#header
{
width: 730px;
margin-left: auto;
margin-right: auto;
padding: 5px;
overflow: hidden;
}
#main
{
width: 730px;
margin-top: 2px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
#footer
{
background:
url("../images/backgrounds/grass.png") repeat-x scroll left top;
clear: both;
width: 100%;
overflow: hidden;
padding-top: 30px;
margin-top: 20px;
}
#footercontainer
{
width: 100%;
background-color: #A37C45;
margin-top: -1px;
}
#footercontent
{
width: 730px;
margin-left: auto;
margin-right: auto;
padding-bottom: 25px;
overflow: hidden;
}
HTML
<html>
<body>
<div id="container">
<div id="header">
</div>
<div id="main">
</div>
</div>
<div id="footer">
<div id="footercontainer">
<div id="footercontent">
</div>
</div>
</div>
</body>
</html>
392
The reason you're seeing this behaviour is because your width: 100% elements are only taking the viewport width as the amount of background they need to render.
You can fix it by adding a min-width declaration to your body element's CSS. Simply set it to the largest nested element's width:
body {
min-width: 730px;
background: #55688A url("../images/backgrounds/ns_bg.gif") repeat-x scroll 0 0;
}
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
