Css, применяющий линейный градиент к телу документа

Question

Я пытаюсь сделать этот градиент отображаться на всем теле документа, но вместо этого он отображается только сверху. Есть все равно, чтобы заполнить его всем телом? Я использую firefox, если это имеет значение.

body { 
     height: 100%; 
     background-image: linear-gradient(to top, blue 80%, green 0); 
    } 

Answer 1

Вот правильный код, чтобы убедиться, что вы получаете линейный градиент.

html { 
    width: 100%; 
    height: 100%; 
} 

body { 
    background-image: linear-gradient(0deg ,white, orange); 
} 

Этот метод работает практически во всех современных браузерах. Надеюсь, это помогло.

Answer 2

Вам нужно определить высоту на 100% для HTML и тела теги:

html, 
body { 
    height:100%; 
} 


body { 
    background:#BAF7C8; 
    background-image: -webkit-gradient(
    linear, 
    left bottom, 
    left top, 
    color-stop(0, #BAF7C8), 
    color-stop(1, #5C93DB) 
); 
    background-image: -o-linear-gradient(top, #BAF7C8 0%, #5C93DB 100%); 
    background-image: -moz-linear-gradient(top, #BAF7C8 0%, #5C93DB 100%); 
    background-image: -webkit-linear-gradient(top, #BAF7C8 0%, #5C93DB 100%); 
    background-image: -ms-linear-gradient(top, #BAF7C8 0%, #5C93DB 100%); 
    background-image: linear-gradient(to top, #BAF7C8 0%, #5C93DB 100%); 
} 

(градиент генерируется из css3factory).

Обратите внимание, что имеется регулярный задний цвет фона.

Вы можете автоматически генерировать градиенты с помощью autoprefixer.

JSFiddle