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.Here's what I did on my personal site (<!-- m --><a class="postlink" href="http://www.charles-reace.com/">http://www.charles-reace.com/</a><!-- m -->):
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.Brilliant! The effect on your site is exactly what I am looking for. Thanks!
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.Brilliant! The effect on your site is exactly what I am looking for. Thanks!