kilrizzy
05 May 2009, 09:44 AM
I have been playing with this issue for some time and multiple sites. When I have a site that uses a background image and a dropshadow on the entire page area I usually set it up like so:
<body>
<div id=all>
<div id=page>everything goes here</div>
</div>
</body>
My body/html css will be set:
height: 100%;
min-height:100%;
And will contain my main background color and image
My "all" div is set:
height:100%;
min-height:100%;
And will contain my dropshadow background
My "page" div is set:
height:100%;
min-height:100%;
height:auto !important;
And this is the main shell of my site in which everything else is in
I have an example of what I am working with now here:
http://epnteams.com/index.php?league=visionline
And the css is here:
http://epnteams.com/styles/main.css
Where I get close until you scroll and the background of "all" stops at the scroll. If I add: height:auto !important; to my "all" div then that scrolls all the way and page stops at the scroll.
<body>
<div id=all>
<div id=page>everything goes here</div>
</div>
</body>
My body/html css will be set:
height: 100%;
min-height:100%;
And will contain my main background color and image
My "all" div is set:
height:100%;
min-height:100%;
And will contain my dropshadow background
My "page" div is set:
height:100%;
min-height:100%;
height:auto !important;
And this is the main shell of my site in which everything else is in
I have an example of what I am working with now here:
http://epnteams.com/index.php?league=visionline
And the css is here:
http://epnteams.com/styles/main.css
Where I get close until you scroll and the background of "all" stops at the scroll. If I add: height:auto !important; to my "all" div then that scrolls all the way and page stops at the scroll.