Мне было трудно понять, почему линейный градиент, заданный для элемента body, останавливается после края одного из его дочерних элементов.
Итак, у меня есть этот 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>
И вот как в итоге будет выглядеть страница (обратите внимание, повторяющийся градиент спускается по странице): 
Итак, проблема в том, что градиент заканчивается в нижней части элемента #container, а не продолжается до конца тела. Несмотря на то, что градиент объявлен явно в элементе body body.
Может кто-нибудь еще помочь мне здесь? Очень ценится!
Примечание: также происходит с использованием префикса -moz в FF.
Прочтение этого сделало меня более смущенным: «Конкретный размер [линейного градиента] будет соответствовать тому элементу, к которому он применяется». Это от Mozilla напрямую