How to extend this background image?

Question

I need to extend only the second part of this image so that it can cover a larger area of the webpage. Can someone please show me how I can do this?

I want that fade to expand up to 800px down:

Answer 1

The image is already 802 pixels tall, so it would appear as though it already is "800 px down"... unless you mean that you want an additional 800 px.

If so, there's two ways to accomplish this...

Method 1 (preferred method)

• resize the canvas to 92x1600
• eyedropper the bottom of the gradient
• swap your foreground and background
• eyedropper the top of the gradient
• make a rectangular selection, selecting everything other than the top section
• shift-drag from the top of the gradient all the way down to the bottom

Method 2 (inferior method)

• resize the canvas to 92x1600
• make a rectangular selection, selecting everything other than the top section
• hit Ctrl-T, or select the following menu: Edit->Transform->Scale
• drag the bottom of the transform box to the bottom of the canvas and hit Enter.

Another method would be to get the web browser to actually draw the gradient for you, but that is a somewhat advanced web development technique.