页面滚动时背景图片显示空白，如何实现完全响应式背景？

问题根源在于body的height: 100%设置：这个值仅让body高度等于初始视口高度，当页面内容超过视口时，body不会自动拉伸，导致背景图只覆盖页面初始可见区域，滚动后下方出现空白。另外autoflow是无效的CSS属性，应该是overflow的笔误。

修正方案： #

• 把body的height: 100%改成min-height: 100vh，确保body高度至少填满当前视口，内容超出时自动延伸高度
• 移除无效的autoflow: hidden，如果需要控制滚动行为，可以改为overflow: auto（默认就是该值，也可以不写）
• 保留background: url(...) no-repeat center/cover，这个属性已经能让背景图自适应缩放并居中覆盖容器

修改后的完整代码： #

body {
    background: url("<?= PUBLIC_URL ?>img/background_image.jpg") no-repeat center/cover;
    min-height: 100vh;
    /* 若不需要隐藏滚动则可删除此行，默认overflow为auto */
    /* overflow: auto; */
}
.container {
    width: 1400px;
    max-width: 100%;
    position: relative;
    margin: auto;
    height: 100vh;
    max-height: 100%;
}

可选优化： #

如果希望背景图固定在视口不随页面滚动移动，可以在background属性中添加fixed：

background: url("<?= PUBLIC_URL ?>img/background_image.jpg") no-repeat fixed center/cover;

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