我制作了一个网页，但底部有多余的空白区域，我该如何摆脱这个？

Question

screen shot of webpage with excess white space at the bottom

我创建了这个网页但是底部有多余的空白区域，我不知道如何摆脱。我觉得它与我的CSS文件中我的身体或主要部分的宽度和高度有关，但我不确定。这是我的CSS文件的代码。

body {
background: url('black_gradient.png')repeat-x;
text-align: center;
height: 800px;
}
#main{
width: 1000px;
height: 1000px;
background: url('brown gradient.jpg')repeat-x;
margin: 25px auto;  
border: solid 2px #ff3819;
border-bottom: solid 0px;
padding: 10px;
}
h1{
    text-align: center;
    font-family:"Times New Roman";
    font: 24pt;
    color: #000000;
}
hr {
    height: 2px;
    color: #000000;
}
p {
    font-family:"Calibri";
    font-size: 12pt;
    text-align: left;
    text-indent: 48px;
    color: #000000;
}

Answer 1

从身体和#main中移除身高或将其设置为自动

Answer 2

尝试：

background-size: cover;

我还建议在css中阅读有关渐变的内容。