CSS背景图片溢出问题：渐变无法完整覆盖背景

你的问题根源在于：

• body设置了固定高度height:100vh，当页面内容高度超过视口高度时，body不会随内容自动延伸，导致渐变背景仅覆盖视口高度区域，超出部分只能显示背景色，视觉上呈现“溢出”效果
• 给渐变背景添加了no-repeat，即使body高度延伸，渐变也无法覆盖新增区域

修复方案 #

1. 将body的height:100vh替换为min-height:100vh，确保body高度至少为视口高度，且能随内容自动扩展
2. 移除渐变背景后的no-repeat，让渐变可以覆盖整个body区域

修改后的CSS代码 #

body {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    min-height: 100vh; /* 替换为min-height，适配内容高度 */
    margin: 0;
    padding: 0;
    background: linear-gradient(rgba(18, 16, 32, 0.8), rgba(20, 28, 58, 1)), url("imgs/Untitled-1.png") no-repeat; /* 移除渐变的no-repeat */
    background-color: rgb(20, 28, 58);
    background-size: cover;
    background-position: center center;
    overflow-x: hidden;
}

如果需要背景图始终贴合body区域，background-size: cover会自动调整图片大小以覆盖整个容器，无需额外修改。

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