Eric Rohloff wrote:html, body {
margin: 0;
width: 100%;
height: 100%;
}
Eric, I tried this and it fixed the short pages, but broke the longer pages. They now have the same display problem as the short ones did. ;(
I messed around with it a bit and tried a couple of suggestions I found on Google.
Here's what fixed the problem:
html {
background: rgb(189,214,224);
background: -moz-linear-gradient(top, rgba(189,214,224,1) 0%, rgba(13,50,87,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(189,214,224,1)), color-stop(100%,rgba(13,50,87,1)));
background: -webkit-linear-gradient(top, rgba(189,214,224,1) 0%,rgba(13,50,87,1) 100%);
background: -o-linear-gradient(top, rgba(189,214,224,1) 0%,rgba(13,50,87,1) 100%);
background: -ms-linear-gradient(top, rgba(189,214,224,1) 0%,rgba(13,50,87,1) 100%);
background: linear-gradient(to bottom, rgba(189,214,224,1) 0%,rgba(13,50,87,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bdd6e0', endColorstr='#0d3257',GradientType=0 );
padding-bottom:40px;
text-align: center;
background-repeat:no-repeat;
background-attachment:fixed;
}
I added the 2 lines at the bottom - background-repeat:no-repeat and background-attachment:fixed.
Thanks for your help and suggestions. I often feel like a total newbie.
is to have html then your bg colour you don't need all the padding etc, it does it automatically, why take 10 steps when 1 will do 
