设置max-width的body元素背景图铺满全屏问题咨询

你碰到的这个情况是CSS规范里明确规定的特殊处理——当<html>根元素没有设置背景样式时，浏览器会把<body>的背景“提升”到<html>上渲染。而<html>的背景区域是整个视口（也就是屏幕的大小），所以哪怕你给<body>设置了max-width、padding和background-origin: content-box，背景图还是会铺满整个屏幕，完全不受<body>自身盒模型的限制。

这个设计其实是为了兼容早期网页：过去很多开发者习惯直接给<body>加背景来铺满整个页面，浏览器为了保持向后兼容，就保留了这个特殊逻辑。

怎么让背景受<body>约束？ #

有两种简单的解决办法：

方法一：给<html>设置背景样式

给<html>设置一个背景（比如和页面默认背景一致的颜色），这样浏览器就不会再把<body>的背景提升到根元素，<body>的背景就会遵守自己的盒模型规则了：

html {
  background: #fff; /* 替换成你需要的默认背景色 */
}
body {
  max-width: 160rem;
  padding: 0 6.4rem;
  margin: 0 auto;
  background-origin: content-box;
  background-image: url("https://cdn.pixabay.com/photo/2020/09/09/13/03/bike-riding-5557589_1280.png");
  background-position: left top;
  background-repeat: repeat; /* 加上这个才会重复铺背景 */
}

方法二：用内部容器承载背景

不在<body>上直接设置背景，而是在<body>里创建一个容器<div>，把背景样式应用到这个容器上：

body {
  max-width: 160rem;
  padding: 0 6.4rem;
  margin: 0 auto;
}
.page-container {
  width: 100%;
  background-origin: content-box;
  background-image: url("https://cdn.pixabay.com/photo/2020/09/09/13/03/bike-riding-5557589_1280.png");
  background-position: left top;
  background-repeat: repeat;
}

对应的HTML结构：

<body>
  <div class="page-container">
    <!-- 你的所有页面内容都放在这里 -->
  </div>
</body>

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