Next.js移动端长页面background-size:cover背景图不显示求助

问题原因 #

你当前的CSS存在两处核心配置问题导致长页面背景失效：

1. 给body设置了固定高度height: 100vh，页面内容超过视口高度时，body的实际高度仍然只有1视口高，超出区域不会渲染背景
2. 没有配置背景固定属性，background-size: cover默认会按照body元素的总高度缩放背景，长页面下缩放后的背景远大于视口，就会出现看不到背景的情况

修复方案 #

替换你现有的body CSS为以下代码即可：

body {
  background-image: url("https://via.placeholder.com/500");
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  margin: 0;
  padding-left: 5vw;
  padding-right: 5vw;
  min-height: 100vh;
  width: 90vw;
  font-family: system-ui;
  overflow-x: hidden;
  font-size: 1.3rem;
}

配置说明 #

• 把原有height: 100vh替换为min-height: 100vh：保证短页面下body撑满视口，长页面下body高度随内容自动适配，所有区域都能渲染背景
• 新增background-attachment: fixed：将背景图的渲染基准锚定在浏览器视口，无论页面多长，background-size: cover都会按照视口尺寸缩放背景，同时滚动页面时背景保持固定，完全匹配你的预期效果
• 额外补充的background-position和background-repeat为兜底配置，避免不同浏览器默认样式差异导致的背景偏移、重复问题

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