I clicked new then I clicked gradient in the toolbar. Now what do I do to save it as a gradient? Then what do I put in the css. Stretch-y? right now I'm sitting here with a gradient but I'm not sure how to save it.

  • I have the gradient but I'm not sure what to put in the css file? I tried repeat x and it didn't work. heres what I ptu. body,html{ margin: 0; padding: 0; background: white url(/photoshop.grd) repeat-x; height: 100%; } canyonchase1 over 8 years ago

4 answers

o.k.w 2355
This was chosen as the best answer

For a gradient background, jpg or png format are generally better choices. Reason being when you fade a color to another, there will be quite a number of different colors in between. A gif which has a maximum color palette of 256 colors might not be enough to spread scross the entire length/width of the gradient area and can cause color banding.

Personally I would go for 24bit PNG for best result. However JPG can be visibly as good while having good compression ratio.

As for which direction should you repeat in the CSS depends on the gradient direction. It's it's top-down, you would want to repeat horizontally (repeat-x), Left-right will then be vertically (repeat-y).

From your CSS code, you are using the image "/photoshop.grd", that's likely to be a photoshop gradient file format. This is not a web image format, you should be saving the image as one of the common web image formats (jpg/gif/png) using the Photoshop's "save for web/devices" function.

Your image path (from "/photoshop.grd") indicated that the image is at the webroot. This should be fine though it might not be displayed if you are loading the HTML file from the file system instead of webserver. You might want to use relative path instead.

Do note that browsers load images as styled in an external CSS file based on the location of the CSS file and NOT the location of the HTML files. Hence say, the CSS file is in the folder "css", the HTML file is at the root and the images are in "images" folder, the background property as defined in the CSS file has to be similar to one of the followings:

background: url(../images/background.jpg) repeat-x; /* relative path */
/* or */    
background: url(/images/background.jpg) repeat-x; /* absolute path */
/* or */    
background: url(http://website/images/background.jpg) repeat-x; /* absolute url */
Answered over 8 years ago by o.k.w
BPartch 342

You will want to save it as a .jpg (most likely) then it should work.

Goto > File > Save for web

Answered over 8 years ago by BPartch

I would actually suggest saving it as a .gif (still using "save for web") if the gradient strip contains 256 or less colors. In this situation, saving as .gif instead of .jpg will give you a smaller file size on the image and a faster loading time as well.

Answered over 8 years ago by Matt Milburn

Actually, if your gradient contains no transparency, exporting it as an 8-bit PNG will give you the best visual quality with the lowest file size out of the gate. 8-bit PNGs beat GIFs in nearly all circumstances. If you want to get really serious about image compression there are some options for compressing the image further. A quick Google search on image compression should yield good enough results to get you started. Or, if you're on a Mac, search for 'imageOptim' explicitly - that's a great one.

Answered over 8 years ago by Brandon Gilbreath