|
Nancy -> RE: Gradient BackGround Image (9/2/2003 12:45:13)
|
I took a look at the site you mentioned and found that their background image is a fairly large file size for a site. So the instructions I give won't be for making that image. *S*
The easiest way I've found to make a gradient background is to start with an image that is about 5 pixels tall, and 2000 wide. Yes that is the correct number of zeros. *S* With the wide variety of monitor sizes and resolutions, this will give you an image that won't tile for any or them, or at least won't for 99.9% of them.
Now that you have your image started, depending on which graphics program you are using, just flood fill it, or overlay it with a gradient, probably a two color gradient, using any colors you choose. You might need to play a bit as to where you want the graphic to start to fade, but probably around 300 pixels will work.
Then just save the image. The wide width will keep the image from tiling, and the small height makes for a small file size.
A word of caution though: it will look slightly different at different resolutions, but not enough to notice. If you make it fade from a light blue to white, those site visitors using something more than 800x600 will see more of the white.
An alternative approach is to make an image not as wide, use CSS to set the background image, and set it to tile only vertically, and also setting the background color to be the same as whatever color you used in the image on the right hand side. The background of your page then goes from the image to the plain color, and is invisible to your visitors. This probably gives you a little more control over how much of the gradient each visitor sees. However, and here comes another word of caution: not all browsers will accept the CSS methods regarding tiling. I do think though, that probably all the newer browsers are okay, just not NN4. *S*
If you'll let us know which graphics program you are using, we can probably fill you in on a little more detail of how to accomplish all this.
Nancy
|
|
|
|
