I've been having a hard time figuring out why a linear gradient specified for the `body` element is stopping after the edge of one of its child elements.

So, I have this HTML:

```
<!DOCTYPE html>
<html>
    <head>
        <style>
            #container {
                width: 960px;
                height: 700px;
                border: #FFF thick solid;
                margin: auto;
            }
            body {
                background: -webkit-gradient(linear, 0% 0%, 71% 92%, from(#1F4BA0), to(#070322));
                background: -moz-linear-gradient(40% 75% 90deg,#1F4BA0, #070322);
                color: #FFF; border:0px; margin:0px; padding:0px;
            }
        </style>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div id="container"></div>
    </body>
</html>

```

And this is what the page ends up looking like (notice repeating gradient going down the page): ![Screenshot of repeating gradient](https://i.stack.imgur.com/O1evX.png)

So, the problem is, the gradient ends at the bottom of the `#container` element, instead of carrying on to the end of the body. Despite the gradient being declared explicitly within the body CSS element. 

Can anyone else help me out here? Much appreciated!

Note: also happens using -moz prefix in FF. 

Reading this made me more confused: "[A linear gradient's] concrete size will match the one of the element it applies to." This is from [Mozilla directly](https://developer.mozilla.org/en/CSS/linear-gradient)