我来帮你梳理代码里可能导致背景图片显示异常的问题，以及对应的修复方案：

问题分析 #

你的代码里有几个关键的点会引发响应式或显示问题：

1. 容器高度未定义：#about元素没有设置高度，完全靠内部内容撑开。如果内容较少，背景图片只会显示内容高度对应的区域，看起来像是“显示不全”。
2. background-attachment: fixed的兼容性问题：这个属性在移动端浏览器上容易出现滚动卡顿、背景错位的情况，因为移动端视口的渲染逻辑和桌面端不同。
3. 非响应式的margin设置：.about-text的margin-left:25%和margin-right:20%在小屏幕（比如手机）上会让文字区域变得极窄，甚至超出视口，同时也会间接影响容器高度，加剧背景显示问题。
4. 无效的CSS属性值：你在span里写了font-size:4，没有单位，浏览器无法正确解析，会导致字体大小不符合预期。

修复后的代码 #

CSS部分 #

#about {
  background-image: url(http://i65.tinypic.com/suxzj8.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  /* 移动端替换fixed为scroll，避免卡顿；桌面端可通过媒体查询恢复fixed */
  background-attachment: scroll;
  background-size: cover;
  /* 确保容器至少占满视口高度，背景完整显示 */
  min-height: 100vh;
  /* 用padding替代br控制顶部间距，布局更规范 */
  padding: 2rem 0;
  /* 图片加载失败时的 fallback 背景色 */
  background-color: #f5f5f5;
}

.about-text {
  font-family: "montserrat-regular", sans-serif;
  text-align: justify;
  text-justify: inter-word;
  /* 小屏幕先设置小边距，保证可读性 */
  margin: 0 5%;
  color: black;
  /* 限制最大宽度，避免大屏幕文字过宽 */
  max-width: 800px;
  /* 让文字块水平居中 */
  margin-left: auto;
  margin-right: auto;
}

/* 媒体查询适配桌面端（屏幕宽度≥768px时应用） */
@media (min-width: 768px) {
  .about-text {
    margin-left: 25%;
    margin-right: 20%;
  }
  /* 桌面端可恢复fixed背景 */
  #about {
    background-attachment: fixed;
  }
}

HTML部分 #

<section>
  <div id="about">
    <div class="about-text">
      <p>我们是一家整合传播合作伙伴，提供广告、创意及BTL解决方案。我们不仅提供解决方案，更以简洁明快的方式呈现，吸引消费者注意力并传递核心信息。我们坚信整合传播，让品牌与营销保持同步。我们打造<span style="font-weight:bold;color:black;font-size:1.2rem">广告设计、创意、BTL及印刷解决方案</span>，助力您的企业脱颖而出。<br><br> 我们是一群曾在不同机构担任各类职位的专业人士，深谙广告行业，团队具备打造市场有效广告活动的潜力。</p>
    </div>
  </div>
</section>

关键修改说明 #

• min-height: 100vh：强制#about容器至少占满当前视口高度，确保背景图片能完整展示，不会因为内容少而被截断。
• 响应式背景固定：通过媒体查询，仅在桌面端保留background-attachment: fixed，移动端改用scroll避免兼容性问题。
• 自适应margin：小屏幕减少文字区域的边距，同时设置max-width和居中，保证不同设备上的文字可读性。
• 规范间距与属性：用CSS padding替代<br><br>控制间距，修复span里无效的font-size值，添加背景色fallback避免图片加载失败时显示空白。

额外建议 #

• 尽量使用相对路径引用背景图片，避免外部链接失效导致背景不显示；
• 如果需要更精细的背景控制，可以考虑用伪元素（::before）来实现背景层，分离背景和内容的布局逻辑；
• 测试不同设备的显示效果，尤其是iOS和安卓的移动端，确保背景滚动流畅。

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