Question

When I use gradients, with little content, the gradient repeats, how can I prevent that?

http://jsfiddle.net/mcqpP/1/

I can try using html { height: 100%; }, but when my content requires scrolling … the gradient repeats

http://jsfiddle.net/mcqpP/3/

How can I fix this

Answer 1

Why not render your gradient out as an 1px-wide image and use something like the following:

body {  
     background-color: #fff;
     background-image: url("images/background.jpg");
     background-position: center top;
     background-repeat: repeat-x; 
}

Setting the background-repeat value will help you control how the background… repeats. In this case it would be rendered as a solid band across the top.

http://www.w3schools.com/css/pr_background-repeat.asp

Also, using an image should work across all browsers, whereas the moz-gradients could be problematic. The image method above should render very predictable results across all browsers.