Question

I am doing this

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>

I am testing it on Chrome, the problem is that the gradient is getting repeated for the div and not for the body, when I try to do the horizontal gradient it works just fine.

Any suggestions?

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);

For IE < 9 one can use images or don’t even bother to support it.