0

I am trying to get a linear gradient of 2 colours but it is not working and instead showing me alternate lines of different colors as seen in the image

This is the screenshot from jsfiddle

I am using this css

body{ background: linear-gradient(white, rgb(221,221,221));}

This is the complete jsfiddle

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Palash
  • 498
  • 4
  • 12

2 Answers2

2

Just add height:768px; in css .

http://jsfiddle.net/arshidkv12/78cx3/1/

Arshid KV
  • 9,631
  • 3
  • 35
  • 36
1

Just add:

html, body {
    height: 100%;
}

and will work.

JsFiddle

ZeroWorks
  • 1,618
  • 1
  • 18
  • 22
  • height: 100% doesn't work. Atleast not in the [fiddle](http://jsfiddle.net/maxzeroedge/78cx3/2/) – Palash Jun 19 '14 at 06:35
  • Yes, it works, i guess you put it at body and should be `html, body` not body alone. I've put a jsfiddle. – ZeroWorks Jun 19 '14 at 06:40
  • ok, yeah, it does. But why do I need to have html and body together? Also, how can I get rid of the whitespace at bottom? – Palash Jun 19 '14 at 06:41
  • 1
    Here's the explanation: http://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height – ZeroWorks Jun 19 '14 at 06:43
  • Updated fiddle. White space at bottom can be removed using maring and padding in same selector, updated the jsfiddle to acomplish. – ZeroWorks Jun 19 '14 at 06:46