Scooby-kid

I have done some google-ing, which returned a few HTML code generators that would make the background of the page fade slowly from one colour to another. What I am after is a background starting with one colour at the top, and gently fading to white, or a lighter colour, the further down you go.

this site has what i am after, but it is only being used at the sides, I would want to use it as the enitre backgorund.

I tried to acheive this by creating an immage which was basicly the top colour and the bottome colour, set to a certain opaccity, and then i tried to overlap them, but it didnt really work.

I hope that ^^^^^ all made sense, and thanks for any help you can give me.

Scott.

HankScorpio

Create a slim tall image in whatever tool you use (5px by however tall your typical page is, let's say 1500px)
Fill it with whatever gradient you want
Set the background of your page to be the same colour as bottom of the gradient.
Job done, page will go from one colour to another but never run out no matter how long it gets. (but obviosuly won't have the fade effect at the bottom if it's huge (much greater than 1500px).

That page you linked to has this as the background image (I'd go narrower and taller but please yourself:
http://www.photographywebsite.co.uk/images/body.gif


And uses css to define the background colour and single repeat
body {
background:#4F85F3 url(../images/body.gif) repeat-x scroll left top !important;
}

HankScorpio

Jsut to add, it is the whole background on that page but the content uses css to define the content section as having a white background. If you were to remove that content section, the whole page woudl be a blue gradient to the depth of the file mentioned above.

Scooby-kid

A big thankyou for the mega quick reply.

where it says (../images/body.gif) This is just the file root/name of my gradient immage, right?

Cheers, Scott.

HankScorpio

yup

Jsut reread the post above and not particularly clear - simplified:

Create gradient image.
Set background colour of page to be same as bottom of the gradient.
Set background image to be gradient image with only a horizontal repeat, no vertical repeat.

Scooby-kid