Question

I have a simple page which has a .container in the middle asking for some user information:

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;

Below this i have three separate divisions which are defined using position: fixed; e.g:

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

Now the problem is if i use a gradient on my body tag, it simply covers the the background to the point the container lies. After that it stops doing that:

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

I am using no-repeat here because because otherwise it was repeating the gradient with a prominent line in between. I have also tried the gradient by using it with another div

Any suggestions?

Answer 1

You have to provide a width/height to the html element:

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

DEMO