CSS background-image显示异常求助：背景图错位且替换属性后消失

问题根源 #

body元素默认高度由内部内容撑开，当前页面body为空，高度趋近于0，浏览器会将body的背景图“转移”到html元素上，但因未明确设置根元素高度，导致background-size: cover的计算逻辑出错，背景图因容器高度不足重复显示，出现“下三分之二接上三分之一”的错位现象；换成contain或100% 100%时，因无足够渲染空间直接消失。

修复代码 #

修改CSS部分，确保html和body占满视口高度：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      min-height: 100vh; /* 确保占满视口高度，适配各种屏幕 */
    }
    body {
      background-image: url('https://picsum.photos/1920/1080');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat; /* 彻底避免重复显示 */
    }
  </style>
</head>

<body>
</body>

</html>

关键调整说明 #

• min-height: 100vh：让html和body至少占满浏览器视口的高度，不受内容是否为空影响。
• background-repeat: no-repeat：直接阻止背景图重复，从根源解决错位问题。
• 调整后再使用contain或100% 100%，图片会在完整的容器高度内正常渲染，不会消失。

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