我懂你遇到的这个小麻烦——桌面端背景图能完整铺满，到了移动端就只显示一半，滚动页面后下面就没背景了对吧？问题出在你当前用的height:100%只是让背景容器占满初始视口的高度，但当表单内容超过屏幕高度时，容器不会跟着延伸，导致背景被截断。

下面是具体的修改方案，你只需要调整.background类的CSS属性就能搞定：

修改后的CSS代码 #

body, html {
  height: 100%;
  margin: 0;
  overflow-x: hidden; /* 防止出现不必要的横向滚动条 */
}

.background{
  min-height: 100vh; /* 核心修改：用min-height替代height，确保容器至少占满整个视口高度 */
  background-image: url("7.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed; /* 可选：让背景图固定，滚动页面时背景不动，视觉体验更流畅 */
}

关键修改说明 #

• min-height:100vh代替height:100%：vh是视口高度单位，100vh就是当前屏幕的完整高度，min-height保证容器高度至少等于视口高度，当表单内容超过视口时，容器会自动拉长，背景图也会跟着覆盖整个容器区域，不会再出现截断。
• 可选的background-attachment: fixed：这个属性能让背景图固定在视口位置，滚动页面时只有表单内容滚动，背景保持不动，避免滚动时背景图移位的问题，提升移动端的视觉体验。
• 新增overflow-x: hidden：防止页面因为某些元素溢出产生横向滚动条，保持页面布局整洁。

替换完CSS后，你再在移动端测试一下，背景图应该就能完整覆盖整个页面，不管内容多长都不会出现截断啦！

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