It took me a while to figure out how to get a gradient background to look exactly like I wanted. While the simplest solution is to use a repeated background to create a gradient effect, I wanted it to fade out at the bottom. If you look at this site www.sunflowermaids.com, there is only a gradient at the top of the page. As the page gets longer like, the background is a constant colour. Somehow I needed to have two different backgrounds, both working at the same time. It took a lot of digging but I finally found a solution.
Here is the code that is necessary to get it to work. Visit http://checklistmaids.com/. First, create a thin image that will be your gradient. Mine is located here.
The css code to use this as a repeated background is:
body { background: url('gradient.jpg') repeat-x; }
To then get the ‘second’ background image, which is shown when the page gets really tall, I use this image. The css code is:
html { background: url('bg.jpg'); }
Hopefully this can be useful to some people.