全屏背景图需用 min-h-screen + bg-center bg-cover bg-no-repeat 组合；禁用 bg-fixed 防 ios 错位；避免 height 塌陷与平铺失真。

背景图不铺满全屏，只显示左上角一小块

根本原因是 Tailwind 默认的 bg-cover 作用在有尺寸限制的容器上，而 HTML body 默认没有高度约束，导致父容器（比如 <div class="bg-[url(...)]">）高度塌陷。必须显式让背景容器撑满视口。 <ul> <li>给背景容器加 <code>min-h-screen（不是 h-screen），避免内容少时底部留白

确保该容器是直接子元素或已脱离文档流，否则受父级 padding/margin 影响

若用 background-image 写在自定义 CSS 中，记得同时设 background-size: cover 和 background-position: center

图片被拉伸变形或裁剪过度

bg-cover 会缩放图片以完全覆盖容器，但可能裁掉边缘；bg-contain 保持比例但留白。多数全屏场景要的是“居中覆盖+合理裁剪”，关键靠组合类控制。

• 固定写法：bg-center bg-cover bg-no-repeat —— 缺一不可
• 想保留更多顶部/底部内容？改用 bg-top 或 bg-bottom 替代 bg-center
• 如果图太小，bg-[length:100%_100%] 强制拉伸（不推荐，失真）

背景图在移动端显示异常

手机 Safari 对 background-attachment: fixed 支持差，且容易触发滚动卡顿。全屏背景通常不需要视差效果，应主动禁用。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 避免使用 bg-fixed —— 它在 iOS 上常导致背景错位或闪烁
• 如需响应式适配，用 md:bg-[url(...)] + sm:bg-none 控制不同断点是否启用背景
• 加载大图前先设 bg-gray-100 占位，防止白屏

如何让背景图随内容滚动而不是固定

默认就是滚动行为，只有加了 bg-fixed 才会固定。但很多人误以为“全屏背景=固定”，结果在滚动时发现背景不动、内容从上面划过，其实是预期外的视觉割裂。

• 删掉所有 bg-fixed —— 这是最常见的多余操作
• 若容器用了 position: sticky 或 transform，可能触发层叠上下文，导致背景渲染异常，此时加 will-change: transform 反而更糟，优先检查定位逻辑
• 真正需要视差时，用 Intersection Observer 配合 translateY 动态控制，别硬套 bg-fixed

Tailwind 的背景图能力很直接，但“全屏”这个需求背后全是尺寸和渲染上下文的细节。最容易漏掉的是 min-h-screen 和 bg-no-repeat 的组合——少了任一个，要么铺不满，要么平铺成马赛克。