CSS设置的背景图在页面滚动时无法铺满全高问题求助

你当前的实现存在两个核心问题：

• 背景容器.bc-grnd-img设置了固定height: 500px，且为普通相对定位，容器高度无法跟随页面内容高度自动变化，当内容长度超过500px时，容器下方就没有背景覆盖
• background-size: cover的作用是把背景图缩放到刚好覆盖容器尺寸，容器高度固定的前提下，手动调大height只会放大容器、拉伸背景，无法显示原图未展示的部分

方案1：背景层改为固定定位（推荐，不影响页面内容展示） #

这个方案适合你需要背景模糊效果不干扰页面普通内容的场景，直接修改现有CSS即可：

.bc-grnd-img {
    background-image: url("https://media.istockphoto.com/photos/little-cute-dumpy-frog-with-green-background-picture-id694848990?k=20&m=694848990&s=612x612&w=0&h=9tBJzT_Efz0GqI30Je72vvkqtSCQ5Deb_RRCdsG-e0c=");
    filter: blur(8px);
    -webkit-filter: blur(8px);
    /* 替换原有定位和尺寸设置 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* 原有背景相关设置保留 */
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}

修改后背景容器会始终固定铺满整个浏览器视口，无论页面内容多少、是否出现滚动条，背景都会完整覆盖页面，模糊效果仅作用于背景层，不会影响其他页面内容。如果需要优先展示原图更多的纵向内容，把background-position改为top center即可。

方案2：将背景挂载到根元素 #

如果不需要单独的背景层，也可以直接把背景加到页面根元素上：

1. 删除现有<div class="bc-grnd-img"></div>元素
2. 添加如下CSS：

/* 先重置默认边距，避免页面出现多余空白 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  min-height: 100vh;
}
body {
  min-height: 100vh;
  position: relative;
}
/* 用伪元素做背景，避免模糊影响内容 */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url("https://media.istockphoto.com/photos/little-cute-dumpy-frog-with-green-background-picture-id694848990?k=20&m=694848990&s=612x612&w=0&h=9tBJzT_Efz0GqI30Je72vvkqtSCQ5Deb_RRCdsG-e0c=");
  filter: blur(8px);
  -webkit-filter: blur(8px);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}

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