CSS Background Gradient with offset

Question

I applied a gradient as background image to my body. Then I added 255px offset at the top using background-position:0 255px;.

It looks quite good except one little issue: of course the gradient does not end at the bottom of the page but 255px underneath.

Is there any easy way to let the gradient end at the bottom but start with offset from to?

http://jsfiddle.net/julian_weinert/ar6jC/

Answer 1

You can achieve what you want like this: Place your background at 0px 0px and define a gradient with more color-stops, having one solid color area at the top and then the actual gradient, like this:

background-position: 0px 0px;
background-image: linear-gradient(to bottom, 
    #FFFFFF 0px,     /* Have one solid white area */
    #FFFFFF 255px,   /* at the top (255px high). */
    #C4C7C9 255px,   /* Then begin the gradient at 255px */
    #FFFFFF 100%     /* and end it at 100% (= body's height). */
);  

(The sample code works on latest versions of Chrome and FireFox, but adapting it to support all major browsers and versions is straight-forward, applying the same principle.)

See, also, this short demo.