How to: Gradient background

In this tutorial, you will learn how to create an gradient backround for your website, blog, or whatever you want to use it for.

EXAMPLE HERE!

So lets get started. First off open your Adobe Photoshop, then create a new image with the following sizes.



After you have done that, pick a color that you really like, or one that suits the website/blog that your doing this gradient bg for. Image Not Found Im going

to be using grey #cacaca.



Now select your gradient tool by going to your paintbucket if gradient is not already selected. :td:



Now If you dont know how to use the gradient tool, I suggest you read up on it. Dont worry it's very simple. Now make sure your other color is white.
Now your color area should look like the picture above.

Next you need to click-hold and drag your mouse down the newly created area. Remember if you want the gradient to be straight you need to hold

Shift after click-holding, then drag down your mouse down.



Pretty neat? Well were not finished yet! Now comes the coding part. This is the easiest part! First you need to open up notepad or your

favourite scripting program.



Im going to use notpad here. This is going to be our css for index.html
If you have another stylesheet added to your index document, you can just modify your body{} with this Image Not Found



Now type the following code...



or just copy it below (for the lazy people)

body { background-color: #ffffff; background-image: url('gradient.jpg'); background-repeat: repeat-x; }



Now remember that you need to change the bg color to white (#ffffff) since the image blends into the original hex bg of the page. The background-image

should have the correct url to the gradient image that you have just completed. Mind that it does not have to be .jpg Image Not Found It can be

.png/.gif whatever you like.

So your final product should look like this when finished Image Not Found

If you want to view each file used in the final product feel free.

-> gradient.jpg
-> style.css

:td:

Sunday May 27, 2007 | http://www.totaldream.org/article/7-how_to:_gradient_background.html