background-position需成对设置才生效，推荐center center；bootstrap的bg-*类会覆盖背景图，须删除并确保容器有尺寸；响应式需用媒体查询配合!important；还需协同设置background-size、no-repeat及容器宽高比。
background-position 值怎么写才真正生效
直接写 background-position: center center 是最稳妥的起点，它等价于 50% 50%，但关键词比百分比在移动端 Safari 更可靠。别只写 center —— 那只设水平方向，垂直方向默认是 top，结果图片被压到顶部。
常见可用值（必须成对或单关键字）：
-
center center：完全居中（推荐默认） -
center top：水平居中、垂直贴顶 -
left top或0 0：左上角锚定 -
right bottom：右下角锚定 -
20px 30px：距左 20px、距上 30px（像素偏移兼容性好） -
50% 20%：水平居中、垂直在顶部往下 20%（注意 Safari 对百分比偶尔解析偏差）
为什么加了 Bootstrap 的 bg-* 类后 background-position 失效
bg-primary、bg-dark 这类工具类本质是设置 background-color，会覆盖掉你原本的 background-image，不是“位置没对”，而是图根本没渲染出来。
必须做两件事：
- 删掉所有
bg-*类（它们和背景图互斥） - 确保容器有明确尺寸，比如加
min-height: 100vh或height: 400px，否则背景图无处可显 - 检查控制台是否有
404错误——路径错也会导致“看起来没生效”
怎么让不同屏幕用不同 background-position
Bootstrap 不提供 bg-pos-sm-center 这类响应式工具类，得靠媒体查询手动覆盖。关键不是“套类”，而是按断点重写定位值。
示例（Sass 写法，与 Bootstrap 5 断点对齐）：
@include media-breakpoint-up(sm) {
.bg-pos-sm-top {
background-position: center top !important;
}
}
@include media-breakpoint-up(md) {
.bg-pos-md-center {
background-position: center center !important;
}
}
@include media-breakpoint-up(lg) {
.bg-pos-lg-bottom {
background-position: center bottom !important;
}
}
HTML 中叠加使用：<div class="bg-image bg-pos-sm-top bg-pos-md-center bg-pos-lg-bottom"></div>
注意：
- 必须加
!important，否则容易被 Bootstrap 的其他背景相关样式覆盖 - 类顺序很重要：后写的类优先级更高，所以大屏类要放后面才生效
- 别用
max-width写反向断点（如@media (max-width: 767.98px)），容易漏掉边界值，统一用min-width更稳
容易被忽略的协同参数
background-position 单独调对了，不等于最终显示就对了。它只是“裁剪前的锚点”，实际看到什么，取决于 background-size 和容器宽高比。
典型陷阱：
- 用了
background-size: cover却没配background-position: center center→ 关键内容（比如人脸）可能被裁掉 - 在 iOS Safari 上，
vh高度会随地址栏收起/展开跳变 → 改用min-vh-100更稳 -
background-repeat: repeat是默认值 → 忘记加no-repeat会导致背景图平铺，看起来像“位置乱了” - 父容器有
padding或max-width（比如.container）→ 背景图被截断，应改用.container-fluid或直接挂到body
