фон не применяется на весь экран

Question

У меня есть простая страница с .container в середине, запрашивающая некоторую информацию о пользователе:

height: auto;              width: 300px;
background: white;         margin-left: auto;
margin-top: 10%;           margin-right: auto;
padding: 50px 20px 20px;   border-radius: 3px;
-moz-border-radius: 3px;   -webkit-border-radius: 3px;

Ниже у меня есть три отдельных подразделения, которые определены с помощью position: fixed;, например:

position: fixed;      z-index: -10;
bottom:2%;            width: 100%;
text-align: center;   color: #eaeaea;

Теперь проблема в том, что если я использую градиент на своем теге body, он просто закрывает фон до точки, в которой находится контейнер.После этого он перестает это делать:

body {
background-color: #851207 no-repeat;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(133, 18, 7)), to(rgb(83, 9, 3))) no-repeat;
background-image: -webkit-linear-gradient(top, rgb(133, 18, 7), rgb(83, 9, 3)) no-repeat;
background-image: -moz-linear-gradient(top, rgb(133, 18, 7), rgb(83, 9, 3)) no-repeat;
background-image: -o-linear-gradient(top, rgb(133, 18, 7), rgb(83, 9, 3)) no-repeat;
background-image: -ms-linear-gradient(top, rgb(133, 18, 7), rgb(83, 9, 3)) no-repeat;
background-image: linear-gradient(top, rgb(133, 18, 7), rgb(83, 9, 3)) no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#851207', EndColorStr='#530903') no-repeat;
}

Я использую здесь no-repeat, потому что в противном случае он повторял градиент с заметной линией между ними.Я также попробовал градиент, используя его с другим div

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

Answer 1

Вы должны указать ширину / высоту для элемента html:

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

DEMO

Answer 2

Juste приложил минимальную высоту к вашему телу.

body {
    min-height: 100%;
}