How to a have Verticle fading Backgorund image

[shakim]

I have a fading image that is very red in top and slowly turns pink as in gets to the bottom. I want to use that for my Background. But when the page content gets longer the background turns white and if I turn bg repeat on it starts from the red again. Is there a way to have the BG fade down to the last shade of pink and continue that shade to the bottom of the page?

[boogyman]

you need to expand your image to a height that you will never go beyond, or that you are comfortable with

[shakim]

It varies from page to page. What I want to do is create a CSS rule that will display the first image and then create a second image (using the last pixel of the first image) and set that to the rest of the page. Is that possible? Basically have a gradient image (1X600) and a second one (1X1). The 1x1 would be the last pixel of the 1x600.

[boogyman]

if that second image is only 1px X 1px cant would you just be able to use a solid color?

selector {
     background: #hexadecimal url('/path/to/image') repeat-x top left;
}

what that does is takes you background hexadecimal (color) and applies it to the entire element (selector) and then it attempts to download and use the image.

So if you were to lay your page out on a table you would see three layers
the background color - applied to the entire element from top to bottom, left to right
the background image - applied to the user-defined portions of the visible element, PS... a background image does have the ability to extend beyond the width/height of the element, which is what the CSS property overflow was created for.
the last layer would be your content - this fits within the user-defined dimensions of the element.

Hexadecimal uses the RGB color model and ranges from values of 0-15
0-9 A-F

FF0000 - red
00FF00 - green
0000FF - blue
FFFF00 - yellow

[shakim]

Thank you. I'll do that. Is there a way to use a image say greater than 1X1 pixel as the ending BG?