Невозможно получить вертикальный градиент, используя только CSS

Question

Я делаю это

body{

background: -webkit-gradient(linear,left top, left bottom, from(#FAFAFA), to(#D8D8D8));

}

<div class="container">
    <div cass="row">
        <div class = "eight columns"> <p> I am in eight column</p></div>
        <div class = "four columns"> <p> I am in four column</p></div>
    </div>

    <div class="row">
        <div class ="twelve columns"> <p class="centered">I am in 12 column </p></div>
    </div>

</div>

Я проверяю это на Chrome, проблема в том, что градиент повторяется для div, а не для тела, когда я пытаюсь сделать горизонтальный градиент этоработает просто отлично.

Есть предложения?

Answer 1

background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ECF4FF), to(#62A9FF));
   /* Safari 5.1+, Mobile Safari, Chrome 10+ */
  background-image: -webkit-linear-gradient(top, #ECF4FF, #62A9FF); 
   /* Firefox 3.6+ */
  background-image: -moz-linear-gradient(top, #ECF4FF, #62A9FF);
   /* IE 10+ */
  background-image: -ms-linear-gradient(top, #ECF4FF, #62A9FF);
   /* Opera 11.10+ */
  background-image: -o-linear-gradient(top, #ECF4FF, #62A9FF);

Для IE <9 можно использовать изображения или даже не пытаться их поддерживать. </p>