When attempting to place a background image on the body element and the page height exceeds that of the viewport, allowing for vertical scrolling. In this case, the background image seems to start or end at the point where the viewport ends when scrollTop is 0.
It's almost as if the body's height of 100% matches the height of the viewport. Why is this happening? What am I missing?
html {
height:100%;
}
body {
font-family:tahoma;
font-size:11px;
color:#333333;
background:url('/new/gfx/layout.bottom_bg.png') bottom repeat-x #eef7ff;
margin:0px;
height:100%;
overflow-y:scroll;
}