CSS设置body背景图无法居中、不适应浏览器窗口大小如何解决？

修复方案 #

你只需要在原有CSS基础上补充部分属性即可，原有老师指定的规则完全保留无需修改：

/* 新增默认样式重置，解决居中失效问题 */
html, body {
  height: 100%;
  margin: 0;
}

body {
  /* 原有代码完全保留 */
  background: no-repeat url(background.jpg);
  background-position: center center;
  background-color: #f2f2f2;
  /* 新增背景尺寸控制，解决图片过大超出窗口问题 */
  background-size: contain;
}

修复逻辑说明 #

• 居中失效原因：浏览器默认给body添加了8px的外边距，且body默认高度由内部内容高度决定，当页面内容不足一屏时，背景居中是相对于body的实际高度计算，而非浏览器窗口高度。设置html, body高度为100%、清零边距后，body高度和浏览器视口高度一致，居中属性即可正常生效。
• 图片过大原因：CSS默认background-size取值为auto，会保留图片原始分辨率，原图大于窗口尺寸时就会显示不全。新增的background-size属性：
  • 取contain：等比例缩放图片，保证完整显示在背景区域，无裁剪
  • 取cover：等比例缩放图片，保证铺满整个背景区域，超出部分裁剪
    你可以根据示例效果选择对应取值即可。

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