|
| |
|
|
leatherlips
Posts: 248
From: USA
Status: offline
 |
Gradient BackGround Image - 9/2/2003 12:06:55
I know this is probably very simple, but I can't figure it out.
I want to have a background image on my website. However, I DO NOT want it to tile. What I would like to have is an image starting out dark on the left side of the page and as it appears toward the right, it fades away. I want it to be able to fill the whole screen regardless of the users monitor size.
An example of what I am talking about is at www.milonic.com . How do I go about doing this?
Thanks.
|
|
|
|
Nancy
Posts: 3626
Joined: 11/9/1999
From: Nebraska
Status: offline
|
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
_____________________________
Easy Estimates -- is a simple to use tool to quickly build a Web site page enabling visitors to quickly and easily create an estimate of the cost of services that you provide.
| |
|
|
|
leatherlips
Posts: 248
From: USA
Status: offline
|
RE: Gradient BackGround Image - 9/2/2003 15:08:08
Thanks for the fast replies!
Nancy, thanks for moving my post to the appropriate forum.
I will be using PhotoShop 7 to make my graphic. Your idea of an image 5 x 2000 sounds easy enough. I was thinking along those lines already but was afraid that width would create UNWANTED horizontal bars. If it doesn't create the bars, then all will be well.
Thanks.
| |
|
|
|
Nancy
Posts: 3626
Joined: 11/9/1999
From: Nebraska
Status: offline
|
RE: Gradient BackGround Image - 9/2/2003 15:42:44
As a background image, there will be no horizontal scroll to the page.
In Photoshop, you might want to increase the navigation view to maybe 300 or 400% so you can get a better idea of where you want one color to end and the other to start. Just "draw" your gradient from left to right for part of the image and stop where you want the transition to be. The balance to the right will be the second color. On a guess, you should be able to go over to about 300 pixels or so.
Nancy
_____________________________
Easy Estimates -- is a simple to use tool to quickly build a Web site page enabling visitors to quickly and easily create an estimate of the cost of services that you provide.
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
