CSS背景图像随页面滚动功能失效问题求助

当前代码存在的核心问题 #

• 注释未闭合导致属性全失效：你在切换渐变背景和图片背景的注释时，只写了开头的/*，没有补上闭合的*/，导致从注释行开始，后面的背景属性、定位属性、尺寸属性、z-index配置全部被当成注释内容，完全不参与渲染——这是你写的代码根本不生效的首要原因。
• 定位逻辑和需求错位：你原本的注释里标注了要background-attachment: scroll（即背景随页面同步滚动），但给伪元素设置了position: fixed，这个属性的效果是元素钉在浏览器视口的固定位置，完全不随页面滚动偏移，和你的目标完全相反。
• 层级配置有隐患：设置z-index: -1很容易让背景图被压到父元素的背景层下面，出现“配了背景却看不见”的问题。
• 缺少背景适配规则：没有配置background-size，实际渲染时会因为图片和容器尺寸不匹配，出现意外裁切、重复平铺的问题。

修正后的可运行代码 #

/* 给header加定位参考，保证伪元素的定位逻辑准确 */
header.masthead {
  position: relative;
}
header.masthead::after {
  content: "";
  background-image: url(/assets/img/gradient-bg.jpg);
  /* 删掉之前吞掉属性的注释，补回必要配置 */
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover; /* 让图片自动适配容器尺寸，铺满不拉伸 */
  /* 替换错误的fixed定位，用绝对定位跟随父元素同步滚动 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
/* 把header内的内容抬到背景图上方，保证文字、按钮可正常显示和交互 */
header.masthead .container {
  position: relative;
  z-index: 1;
}

日常排查注意点 #

• 打开浏览器开发者工具的网络面板，确认/assets/img/gradient-bg.jpg的路径有效，没有出现404加载失败的情况
• 如果需要背景图铺满整个页面（而不是仅在header区域显示），可以把伪元素的挂载目标从header调整到body元素上，同样用绝对定位即可实现和页面完全同步的滚动效果
• 如果你实际想要的是“背景钉在视口不随滚动移动”的固定背景效果，才需要保留position: fixed，此时只要补全注释、调整层级即可正常生效

内容的提问来源于stack exchange，提问作者majo.onk