Question

When I try to set a background image on the body element and the page is heigher than the viewport and you are able to scroll up or down.. Then the background image starts/ends at the position where the viewport ends when scrollTop is 0..

Its like body height 100% is equal to the viewport height? Why? What am I doing wrong?

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;
}

Answer 1

You are not doing anything wrong; 100% height for the body does mean the height of the viewport. If you want it to be the height of the image, you should use the pixel height of the image. If you want it to expand to the size of the content, you can use the min-height property (set to 100%).