滚动页面时背景图片无法延伸至视口下方的问题求助

我用图书馆书架图片作为网页背景，图片可重复平铺，单个视口内显示正常。页面上方有个DIV元素，背景尺寸大于视口。我的CSS代码如下：

body {
    background-image: url("images/library4.jpg");
    overflow-y: scroll;
}

.article {
    background-image: url("images/old-paper.jpg");
    width: 95%;
}

但滚动页面时，下方无法显示背景图片，滚动后露出的区域没有背景。尝试过height:auto等设置，均无效。

核心问题 #

你给body设置了overflow-y: scroll，这会让body变成独立的滚动容器，此时body默认高度仅为视口高度，背景图只会绘制在body自身的高度范围内。当内容超过视口高度时，滚动的是body内部的内容，而body本身的高度没有随内容延伸，导致滚动后露出的区域没有背景。

解决步骤 #

1. 移除body的overflow-y: scroll
   浏览器默认会自动处理页面滚动，不需要给body单独设置滚动属性。移除后，body会被内容自动撑开，高度延伸到整个页面，背景图就能平铺覆盖所有区域。修改后的CSS：

body {
    background-image: url("images/library4.jpg");
    background-repeat: repeat; /* 明确设置平铺，确保生效 */
}

.article {
    background-image: url("images/old-paper.jpg");
    width: 95%;
}

2. 额外优化（可选）
   如果希望背景图固定不随滚动移动，可添加background-attachment: fixed：

body {
    background-image: url("images/library4.jpg");
    background-repeat: repeat;
    background-attachment: fixed;
}

内容的提问来源于stack exchange，提问作者Gary Greenberg