html，由于高度原因，背景图片无法重复：设置为100％

Question

我有一个使用过的网页

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

当我的内容没有足够的内容超出底部时，以填充屏幕的其余部分。

因为body / html元素是根据视口调整大小的，所以当我确实有足够的内容可以滚动时，尽管应该是默认的x / y背景重复行为，但我的背景图像仍会被截断。

body {
    color: rgb(51, 51, 51);
    background-image: url('../img/stardust3.png');
}

html / body标签保留其100％的高度尺寸，但100％的视口比您必须滚动的文档小。 最终，我的html / body标签卡在了顶部。

在此之前，我使用JavaScript来获取文档大小并在调整屏幕大小时不断更改元素尺寸。 我必须回到那吗？

谢谢！

Answer 1

如果您仅设置height: 100%将背景图像扩展到页面底部，请不要。 不管内容如何， <html>元素上的背景将始终填充视口。 此外，html元素上没有内置的边距。 而是使用：

html { background-image: url(../img/stardust3.png); }
body { margin: 0; padding: 0; }

Answer 2

尝试以下方法之一：

body{
    background-attachment: fixed;
}

这将使您的背景不会随着页面的其余部分滚动。

html, body{
    min-height: 100%;
}

如果内容<100％，这会使您的html，body与内容一起增长并填充屏幕。