必须用原生CSS的background-image属性设置背景图，Bootstrap的bg-*类仅设背景色会覆盖图片；需同时指定background-size、background-position和background-repeat，并确保容器有宽高、路径正确、无CORS问题。
直接用 CSS 的 background-image，别碰 Bootstrap 的 utility 类
bootstrap 本身没有提供类似 bg-image 这样的内置类来设置背景图——所有试图用 bg-* 类（比如 bg-primary）叠加图片的方案，最后都会失败或覆盖掉图片。真正生效的只有原生 css 的 background-image 属性。
常见错误现象：div 完全没显示图片、只显示背景色、图片拉伸变形、或者在响应式断点下突然消失。
- 必须手动写 CSS，哪怕只加一行
style="background-image: url(...)..." - Bootstrap 的
bg-*类会设置background-color，和background-image冲突，优先级低时会被覆盖 - 路径写错（尤其用相对路径时）、图片 404、或 MIME 类型不被浏览器接受，都会静默失败
background-size 和 background-position 必须配齐
只设 background-image 很大概率导致图片被裁切、重复平铺，或缩成一个小角。这不是 Bootstrap 的锅，是 CSS 背景默认行为。
使用场景：轮播区、登录页大图、卡片装饰图——这些地方都需要图片“撑满”或“居中覆盖”容器。
-
background-size: cover：等比缩放填满容器，可能裁边（最常用） -
background-size: contain：完整显示图片，可能留白 -
background-position: center center：避免图片偏移，尤其cover下必须加 - 漏掉
background-repeat: no-repeat？默认会平铺，小图瞬间变满屏噪点
响应式背景图要靠媒体查询，不是 Bootstrap 断点类
Bootstrap 的 hidden-sm 或 d-none d-md-block 对背景图无效——这些类控制的是元素显隐，但 background-image 是样式层，不会随元素隐藏而切换。
性能影响：大图在移动端加载会拖慢首屏，但用 CSS 切换图片不会触发二次请求（浏览器已缓存），比 JS 切更轻量。
- 用
@media (max-width: 768px)重写background-image，指向压缩过的移动版图片 - 不要在
style属性里写媒体查询，必须进<style>或外链 CSS - 路径注意：如果用 Webpack/Vite，
url(./img/bg-mobi.jpg)和url(/img/bg-mobi.jpg)行为不同，后者绕过构建工具处理
遇到 background-image 不生效？先查这三件事
不是代码写得不够“Bootstrap”，而是基础约束没满足。90% 的问题出在这三个地方。
-
div高度为 0：背景图需要容器有宽高，height: auto+ 无内容 = 看不见图。加min-height: 300px或height: 100vh测试 - CORS 报错：跨域图片（比如从 CDN 加载）被浏览器拦截，控制台报
Access to image ... has been blocked，换同源图或配 CORS 头 - 路径中的空格或中文：URL 未编码，如
url(./images/节日背景.jpg)→ 改成url(./images/%E8%8A%82%E6%97%A5%E8%83%8C%E6%99%AF.jpg)或改英文名
复杂点在于：背景图是否随容器滚动、是否固定视口、是否要加毛玻璃遮罩——这些都不是加个 class 能解决的，得一层层调 background-attachment 和 backdrop-filter。先确保图能出来，再谈效果。
