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.