Bootstrap 5 官方 CSS 中不存在 bg-image 或 BackgroundImage 类；所有背景图功能需手动编写 CSS，结合媒体查询按断点切换图片源、位置和尺寸，并通过结构分离处理装饰元素。
Bootstrap 5 没有 bg-image 或 BackgroundImage 类
直接说结论：bootstrap 官方 css 中**不存在** bg-image、backgroundimage 这类类名。你看到的要么是自定义 scss 混入，要么是别人手写的 css 类，或者是把 bg-primary 这类背景色类和背景图混淆了。
想靠一个 class 就让背景图自动适配不同屏幕？不行。必须自己写 CSS，配合 Bootstrap 的断点机制来控制。
- 别在 HTML 里写
<div class="bg-image">期待它生效——它什么都不会做 - Bootstrap 的
bg-*类只管背景色，对background-image完全无感 -
img-fluid只作用于<img>标签，对 CSS 背景图无效
用媒体查询切换背景图源，而不是 JS
最轻量、兼容性最好、服务端渲染（SSR）友好的方式，是纯 CSS 媒体查询 + background-image 覆盖。
示例：
.hero-bg {
background-image: url('bg-mobile.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
min-height: 100vh;
}
@media (min-width: 768px) {
.hero-bg {
background-image: url('bg-tablet.jpg');
}
}
@media (min-width: 992px) {
.hero-bg {
background-image: url('bg-desktop.jpg');
}
}- 每个断点换一张图，避免移动端加载桌面大图（省流量、提首屏）
- 务必加
min-height: 100vh或明确高度——否则容器高为 0，图根本看不见 -
background-repeat: no-repeat必须显式声明，不然小图会在大屏上重复铺满 - 别指望
srcset对 CSS 背景图起作用——它只适用于<img>标签
背景图位置要随屏幕手动调，不是自动居中
background-position 在 Bootstrap 里不会响应式变化。写死 50% 50% 在桌面看着好，手机上可能就把人脸切掉。
常见做法是分断点重设：
@media (max-width: 767.98px) {
.hero-bg {
background-position: center top; /* 手机上把关键内容往上提 */
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
.hero-bg {
background-position: 50% 30%; /* 平板折中 */
}
}
@media (min-width: 992px) {
.hero-bg {
background-position: center center; /* 桌面默认居中 */
}
}-
center top和0 0行为一致，但前者更语义化、易读 - 百分比值（如
50% 20%）比像素值更可靠，因为不依赖具体尺寸 - Safari 对
background-position渲染偶尔抽风，建议搭配background-size: cover一起用，降低风险
文本和背景图重叠？别硬调 padding，用结构分离
如果背景图里有丝带、徽章、斜角装饰等非规则区域，光靠 padding 或 margin 让文字避开，会越调越乱，尤其在小屏下。
更稳的做法是：把那个“丝带”做成独立元素，用 Bootstrap 网格或定位控制它，而不是塞进背景图里。
<div class="hero-section">
<div class="ribbon d-none d-md-block"></div>
<div class="container">
<h1 class="text-white">欢迎回来</h1>
</div>
</div>-
d-none d-md-block控制丝带只在中屏及以上显示，小屏直接隐藏 - 丝带用
position: absolute定位，文本用普通流式布局，互不干扰 - 这样改文案、换图、调间距都更直观，不用反复试
background-position像素值
真正麻烦的从来不是“怎么写 CSS”，而是没提前想清楚：这张图到底该当背景还是当内容元素。选错方向，后面所有调试都是徒劳。
