How to make a gradient background image in Photoshop

Hi -

Absolute newbie to CS4 Photoshop. I’ve read Corrie Haffly’s article on creating Web 2.0 effects with Photoshop. I can create a background gradient.

But, what size should my file be and how do I get the image to tile down the page? My inspiration is the gradient background on http://www.css3.info/.

Any help is appreciated.

I find making a gradient 10px wide is better - as I can at least see it when browsing through a folder.

What you’d normally do is create an image with a width of 1px and as high as the gradient is (for example, the backgroundimage on css3.info is 1px wide by 1860px high).

Next you pick the color of the bottom most pixel of that gradient, and then in the CSS put something like:


body {
  background: #eee url('my-gradient-image.jpg') repeat-y;
}

Assuming the color you picked is #eeeeee (which in CSS can be written as #eee).
The repeat-y causes the image to repeat itself vertically over the screen, so the whole width of the page is filled with the image. At the bottom of the gradient the background-color of the page takes over, which is the same as the last pixel of the image, so you don’t notice anything weird there.

Makes sense? :slight_smile:

thanks so much!