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

Question

底部有多余空白的网页的屏幕截图

我已经创建了这个网页，但底部有多余的空白，我不知道如何摆脱。 我觉得好像这与我的身体或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 中的渐变的信息。