我太懂你花好几个小时调试这个背景图问题的糟心感了——这种看起来简单但实际踩坑的CSS问题真的很磨人。从你描述的情况和代码来看，问题大概率出在body元素的高度没有被正确设置，导致background-size: cover没法准确适配整个视口。

先说说你原来的代码为什么会出问题：默认情况下，body的高度是由页面内容撑开的，如果页面内容很少，body的高度就会小于浏览器视口高度，当你调整浏览器尺寸时，cover属性的计算基准就会出错，导致背景图显示异常。

给你一套修正后的代码，应该能解决这个问题：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-image: url(images/background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center; /* 确保图片始终居中，避免偏移 */
  /* 可选：如果需要背景图固定不随页面滚动，加上下面这行 */
  /* background-attachment: fixed; */
}

关键修改点说明： #

• html, body { height: 100%; }：让html和body元素都占满整个浏览器视口的高度，这样background-size: cover就会以完整视口为基准来缩放图片，不会因为body高度不够而出现异常。
• margin: 0; padding: 0;：清除浏览器默认的内外边距，避免背景图周围出现留白，保证完全覆盖。
• background-position: center center：确保无论浏览器尺寸怎么变，图片都保持居中显示，不会出现只显示图片角落的情况。

另外补充两个小提示：

1. 如果你希望完整显示整张图片（不裁剪），可以把background-size: cover换成background-size: contain，但这样可能会在图片和视口比例不匹配时出现留白，根据你的需求选择就行。
2. 检查一下你的背景图片路径是否正确，有时候路径错误也会导致图片显示异常，但从你说“最初看似正常”来看，这个概率不大，但可以顺便确认下。

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