CSS gradients with little content: fix has issue with Chrome

Question

I asked a question CSS gradients with some content some time ago

I came up with a possible fix http://jsfiddle.net/aruUS/2/

html, body { min-height: 100% }
body { 
    background: -moz-linear-gradient(top, blue, red 200px); 
    background: -webkit-gradient(linear, 0 0, 0 200px, from(blue), to(red));
}

only part of Firefox works, does webkit seem to support only percentages for termination of color? Anyway, to make this work?

Answer 1

Just uninstall pxfrom 200px. Pixel values ​​are independent of Webkit gradient syntax. I.e.

background: -webkit-gradient(linear, 0 0, 0 200, from(blue), to(red));

Watch Surfer Safari's blog Introducing CSS Gradients :

- , . , top, bottom, left right .

, , CSS.

Answer 2

:

-webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.3, rgb(255,0,0)),
    color-stop(0.47, rgb(255,0,0)),
    color-stop(1, rgb(0,0,254))
);

-webkit-gradient: http://webkit.org/blog/175/introducing-css-gradients/

: http://jsfiddle.net/aruUS/3/

, : http://gradients.glrzad.com/