Faded background

[Webskater]

I have seen sites lately all done in css where the body has a graduated background - starts one colour at the top and subtly changes all the way to the bottom. How is this done please? Thanks for any help.

[NogDog]

Here's what I did on my personal site (http://www.charles-reace.com/):

CSS:

body {
background : #99aaaa url(img/bg.gif) repeat-x 0 0;
background-attachment : fixed;
margin : 0;
padding : 0;
font : medium normal arial, sans-serif;
color : black;
}


The bg.gif is a tall, thin gif that goes from a dark gray on top to a lighter gray on the bottom. The background color matches the shade of gray at the bottom of the gif. the "repeat-x 0 0" tells it to repeat the background image across the page, starting at the top left corner of the page body. You could use a taller image than I did to get the color transition to stretch further down the page.

Hope that helps.

[Webskater]

Brilliant! The effect on your site is exactly what I am looking for. Thanks!