CSS3 gradient background set on body doesn't stretch but instead repeats?
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?
Apply the following CSS:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
Edit: Added margin: 0; to body declaration per comments (Martin).
Edit: Added background-attachment: fixed; to body declaration per comments (Johe Green).
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%;
Eg:
body {
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cbccc8)) fixed;
}以下是我所做的解决此问题的方法......它将显示内容全长的渐变，然后简单回退到背景颜色（通常是渐变中的最后一种颜色）。
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');
}<body>
<h1>Hello world!</h1>
</body>