设置background-attachment:fixed后背景图高度缩小及顶部留白问题求助

嘿，我明白你遇到的问题了——用background-attachment: fixed固定banner背景后，图片缩了还顶上空隙，这事儿我之前也碰过！

问题根源 #

background-attachment: fixed的工作逻辑是把背景图片锚定在浏览器视口，而不是你设置的.partnerspage元素本身。如果你的.partnerspage没有设置明确高度，它只会根据内容撑开高度，图片就只能显示元素范围内的那部分，看起来就像“缩小”了；至于顶部空白，大概率是浏览器给body或父元素加的默认margin在搞鬼。

解决办法，分两种思路： #

思路1：调整背景图的CSS设置

给容器加上明确高度，同时清除默认边距：

/* 重置默认边距，消除顶部空白 */
body {
  margin: 0;
  padding: 0;
}

.partnerspage {
  background-image: url(http://www.server.com/bl/banner-1920x375-Partners.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  /* 设置和图片一致的高度，确保图片完整显示 */
  height: 375px;
  /* 可选：如果要让图片自适应不同屏幕宽度，加上这行（会裁剪图片边缘） */
  /* background-size: cover; */
}

思路2：改用固定定位的img元素（更直观）

如果不想纠结背景图的视口锚定逻辑，直接用img标签做固定banner，让内容在它下面滚动：

<!-- 固定在顶部的banner -->
<div class="fixed-banner">
  <img src="http://www.server.com/bl/banner-1920x375-Partners.jpg" alt="Partners Banner">
</div>

<!-- 页面内容区 -->
<div class="page-content">
  <!-- 这里放你的所有页面内容 -->
</div>

.fixed-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 375px;
  overflow: hidden;
}

.fixed-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，自动裁剪多余部分 */
}

.page-content {
  /* 给固定banner留出高度，避免内容被遮挡 */
  margin-top: 375px;
}

这个img方案的好处是更容易控制显示效果，不会出现背景图那种奇怪的视口定位问题，调试起来也更直观～

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