网站背景图移动端横向滚动且无法完整显示问题求助

你的问题核心是给.background-image设置了固定宽度430px，部分移动端设备视口宽度小于该值，导致容器超出视口触发横向滚动。另外overflow-x: hidden加在body上有时会因浏览器渲染机制失效，且未正确处理背景图的适配逻辑。以下是修复方案：

关键修复点 #

• 移除容器的固定宽度，改用相对宽度适配视口
• 配置background-size让背景图正确适配容器尺寸
• 重置盒模型，避免padding/margin额外增加元素宽度
• 优化容器高度的自适应逻辑

修改后的完整CSS代码 #

/* 全局盒模型重置，消除默认边距与盒模型计算偏差 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.background-image {
  background-image: url(Images/desktop\ background\ image.png);
  background-size: cover; /* 桌面背景图覆盖容器，保持比例不拉伸 */
  background-position: center; /* 背景图居中显示 */
  height: 739px;
  width: 100%; /* 自适应父容器宽度 */
  max-width: 1519px; /* 限制桌面端最大宽度，避免过宽变形 */
  margin: 0 auto; /* 桌面端容器水平居中 */
}

@media only screen and (max-width: 600px) {
  .background-image {
    background-image: url(Images/mobile\ background\ image.png);
    background-size: contain; /* 完整显示移动端背景图，保持比例 */
    background-repeat: no-repeat; /* 防止背景图重复排列 */
    background-position: center;
    height: auto; /* 容器高度随背景图自适应 */
    min-height: 240px; /* 保证容器高度不低于背景图实际高度 */
    width: 100%; /* 强制占满视口宽度，无横向溢出 */
  }
}

代码说明 #

1. 全局盒模型重置：box-sizing: border-box确保元素的padding和border不会额外增加宽度，彻底避免因盒模型计算导致的横向溢出。
2. 桌面端设置：用width:100%+max-width:1519px实现自适应布局，既保证在宽屏上不拉伸变形，又能适配小尺寸桌面设备。
3. 移动端设置：
   • width:100%强制容器占满视口宽度，从根源消除横向滚动
   • background-size:contain让背景图完整显示在容器内，不会被裁切或拉伸变形
   • height:auto+min-height:240px保证容器高度匹配背景图，同时适配不同设备的显示需求

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