отчетливый фон градиент

Question

Я хочу, чтобы на моем веб-сайте был верхний 55% одного цвета, а нижний 45% - другим цветом. На основе учебника here (я использую зеленый, 80% и 20%, чтобы сделать размер разницы легче обнаружить)

background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0) 80%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.2) 20%); 
background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0) 80%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.2) 20%); 
background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0) 80%,  rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.2) 20%); 
background: -ms-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0) 80%,  rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.2) 20%); 

background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0) 80%,  rgba(255,255,255,0.2) 80%, rgba(255,255,255,0.2) 20%); 
background-color: green; 

Но это немного трудно следовать, и я не могу получить функциональность я хочу. Прямо сейчас, он повторяет градиент полностью вниз по экрану, но я не знаю, почему. Удаление второй записи rgba() полностью разрушает ее, и это был единственный след, который, как я думал, следует.

Answer 1

Если применить этот фон к body, убедитесь, чтобы добавить этот CSS:

html {height: 100%;} 

В противном случае организм не будет принимать всю высоту страницы.

Смотрите эту Fiddle