Bootstrap全屏背景图设置教程

不会自动撑开高度，背景图自然“看不见”。必须确保应用背景的元素有明确的高度，比如设为视口高度。

• 给目标元素加 min-height: 100vh（不是 height: 100vh，避免内容超长时被截断）
• 确认该元素没有被 Bootstrap 的 padding/margin 意外压缩（例如 .container 默认有左右 padding）
• 如果用在
  或自定义

  上，建议脱离 Bootstrap 容器流：不套 .container，或改用 .container-fluid

Bootstrap 5 中推荐的全屏背景写法

Bootstrap 5 已移除自带的 bg-* 工具类对背景图的支持，得手写 CSS。最简可控的方式是定义一个自定义类，配合 cover 和 center/center 定位：

.hero-bg {
  background-image: url('hero.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 100vh;
}

然后在 HTML 中直接使用：

<section class="hero-bg">
  <div class="container d-flex align-items-center h-100">
    <h1>欢迎</h1>
  </div>
</section>

• h-100 让内部 .container 占满父容器高度，方便垂直居中
• 避免把背景写在 .container 上——它默认最大宽度 1140px，左右留白，cover 会拉伸但视觉上仍是“中间一块”
• 如果要响应式适配，可加 @media (max-width: 768px) { .hero-bg { background-attachment: scroll; } } 防止移动端卡顿

background-attachment: fixed 导致滚动错位怎么办

加了 fixed 想做视差效果，但在 iOS Safari 或部分安卓浏览器里，背景会“撕裂”或随滚动跳动。这不是 Bootstrap 的问题，而是 background-attachment: fixed 在移动端兼容性差且性能低。

• 优先去掉 fixed，用纯 cover + center 更稳妥
• 真需要视差，改用 JS 库（如 scrollama）或 CSS transform: translateY() 配合滚动监听
• 若坚持用 fixed，务必加 background-color 作降级色，防止图片加载失败时露白

图片加载慢导致背景闪白或错位

尤其在首次访问或弱网环境下，background-image 加载滞后，用户会先看到空白或 fallback 色块。

• 提前预加载：在 中加
• 用内联 base64 占位小图（仅适用于 ≤2KB 的 loading 图）
• 在 JS 中监听 img 元素加载完成再添加背景类，比纯 CSS 更可控
• 慎用 SVG 作为背景图——某些旧版 Bootstrap（如 v4.6）对 SVG 的 cover 渲染支持不稳定

实际效果是否“全屏”，最终取决于你选中的那个 DOM 元素有没有真正占满 viewport。很多问题不是 cover 不管用，而是它作用在了一个高度为 auto 的空 div 上。

到这里，我们也就讲完了《Bootstrap全屏背景图设置教程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！