ASP.NET MVC滚动时背景图片被裁剪问题求助

问题根源 #

1. background-attachment: fixed 把背景图固定在视口而非整个页面——当内容超出视口高度时，滚动出来的区域不会显示背景，形成空白。
2. 父容器 .background-logo-login 缺少相对定位和最小高度设置，导致伪元素的覆盖范围无法跟随页面内容高度撑开。

修正后的CSS代码 #

img {
  max-width: 100%;
}

.img-details {
  height: auto;
  object-fit: contain;
}
 
.background-logo-login {
  isolation: isolate;
  position: relative; /* 让伪元素基于该容器定位 */
  min-height: 100vh; /* 至少覆盖视口高度，内容过多时自动延伸 */
}

.background-logo-login::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.1;
  background-image: url(../img/SAS_web_2.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain; /* 强制背景图完整显示，不裁剪 */
  /* 若优先要覆盖整个区域，可替换为 background-size: cover;（会裁剪图片边缘） */
}

关键调整说明 #

• 移除 background-attachment: fixed，让背景图随页面内容区域延伸，而非固定在视口。
• 给 .background-logo-login 设置 position: relative 和 min-height: 100vh，确保伪元素能覆盖从视口到全部内容的高度范围。
• background-size: contain 保证背景图完整显示，若需要背景铺满容器且接受边缘裁剪，可换成 background-size: cover。

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