ok say the content inside the <body> totals 300px high.
If I set the background of my <body> using -webkit-gradient or -moz-linear-gradient
Then I maximize my window (or just make it taller than 300px) the gradient will be exactly 300px tall (the height of the content) and just repeat to fill the rest of the window.
I am assuming this is not a bug since it is the same in both webkit and gecko.
But is there a way to make the gradient stretch to fill the window instead of repeat?
Dirty; maybe could you just add a min-height: 100%; to the html, and body tags? That or at least set a default background color that is the end gradient color as well.
Apply the following CSS:
html {
height: 100%;
}
body {
height: 100%;
background-repeat: no-repeat;
}
Here's what I did to solve this problem... it will show the gradient for the full length of the content, then simply fallback to the background color (normally the last color in the gradient).
html { background: #cbccc8;}
body {
background-repeat: no-repeat;
background: #cbccc8;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8));
background: -moz-linear-gradient(top, #fff, #cbccc8);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cbccc8'); }
I've tested this in FireFox 3.6, Safari 4, and Chrome, I keep the background-color in the body for any browsers that for some reason don't support styling the HTML tag.
Regarding a previous answer, setting html and body to height: 100% doesn't seem to work if the content needs to scroll. Adding "fixed" to the background seems to fix that - no need for height: 100%;
E.g., background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed;
Thank you so much, just used your solution, I added html {min-height: 100%;} and fixed for the gradient itself and this is what finally seems to work!