html，由于高度的原因，背景图像无法重复:100%设置

html, background-image fails to repeat on account of height: 100% setting

本文关键字：图像 设置 100% 背景 于高度 高度 html      更新时间：2023-09-26

我有一个使用的网页

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获取文档大小并不断更改调整屏幕大小时的元素尺寸。我必须回到那个吗？

谢谢！

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

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

尝试其中一种：

body{
    background-attachment: fixed;
}

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

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

这将使你的html，身体随着你的内容而增长，如果内容<100%。

相关文章：