Question

我正忙着将我的HTML网站放入wordpress模板。到目前为止，它正在努力，但我仍然困在背景中。在大页面上，背景停止并显示一个很大的空白区域。

背景包含条纹，但也有从暗（向上）到亮（向下）的渐变渐变。

我正在尝试将背景拉伸到屏幕底部。这适用于页面小于我的屏幕，但是我需要向下滚动的较大页面，背景停止并显示一个很大的空白区域。

我需要一些帮助 - 我已经尝试了很多解决方案，其中一些解决了我对大页面的问题，但是问题存在于较小的页面上。我希望有一个解决方案可以在每一页上一直向下拉伸这个背景。

当前代码（适用于小页面，但大页面上存在问题）

html
{
    background: url(images/lines-bg.png);
    background-repeat: repeat-x;
}

但是当我将它添加到html css时，问题会出现在小页面上。

    background-size: auto 100%;

我还希望背景可滚动，而不是固定。

很多，非常感谢！

Answer 1

如果您不必支持超级旧浏览器，可以尝试两件事：

您可以使用background-attachment: fixed;属性修复背景加载到页面的初始方式，即使滚动也是如此。

或者您可以使用background-size:cover;属性来扩展背景以动态覆盖内容区域的大小。这并不总是最好的解决方案，因为图像质量可能会成为一个问题，并且不同页面长度会产生不一致的背景。

Answer 2

我发现如何解决这个问题，我将css代码从html移动到body并添加了一些额外的东西以确保：

html
{
    min-height:100%;    
}

body
{
    min-height:100%;
    background: url(images/lines-bg.png);
    background-repeat: repeat-x;
    background-size: auto 100%;
}

Answer 3

背景有多大？当您说background-size: auto 100%时，它将背景图像设置为其大小的100％。例如：如果图像是100px并且你说background-size: auto 100%它会告诉图像是100px，如果你做background-size: auto 50%它会告诉图像是50px。我相信这是你的问题。

试图向下拉伸背景，但仍留有空白区域

3 个答案: