background image not tiling properly

[lancsDavid]

got a weird problem with one of the background images

http://mrcpsychmentor.com/testsite2/index.php

if you open the page in a window of less than full height (say about 600 pixels tall) and then scroll down to the bottom of the page, you'll see that one of the background images (the gradients on the body element - images/sideGradients or something) don't extend to the bottom of the page

i've a feeling its doing exactly what its supposed to, but not what i want it to do (i want the gradients to always extend to the full height of the content - not just the original body height when the page was opened)

anyone any idea what i'm doing wrong? or how i might go about fixing it? [don't mind if its a hack. pretty much at the end of my rope with this project]

[Paul O'B]

Hi,

Didn't I fix this for you before?

You can't have images on html and body when you set then to height:100% because the body will stop short at 100%. html and body are unique and image painted on the body are propogated to html automatically so in 100% environments you can only really use the body element for an image and leave html alone.

If you remove the background from the html element your page will work in modern browsers due to the multiple backgrounds you are using on the body.

html{background:transparent}

Alternatively you may be able to keep the image on html if you set html and body to display:table:

html,body{display:table;width:100%}

You'd need to check as playing around with html and body can have weird effects (and display:table is only supported from IE8+).

[lancsDavid]

cheers. yes you probably have sorted this before but i mustn't've understood the solution (& still don't, tbh)

nonetheless, i did what you said & its worked, so thanks