使用Bootstrap 5设置网站背景图片失败，求正确配置方法

以下是逐一排查并解决问题的具体步骤：

1. 先确认图片路径是否正确 #

路径错误是最常见的原因，需根据你的文件结构调整url()中的路径：

• 若CSS文件与images文件夹在同一层级：保持url(images/bgr.jpeg)即可，先核对你的文件结构是否匹配
• 若CSS在css子文件夹，images在根目录：改为url(../images/bgr.jpeg)（../表示回到上一级目录）
• 怕层级混淆的话，直接用根目录绝对路径：url(/images/bgr.jpeg)（开头的/代表网站根目录）

可以打开浏览器开发者工具的「网络」标签，查看图片请求是否返回404，快速判断路径是否错误。

2. 覆盖Bootstrap的默认样式优先级 #

Bootstrap对body有默认背景样式，可能覆盖了你的自定义CSS，可通过以下方式提升优先级：

/* 方式1：增加!important强制覆盖 */
body {
  background-image: url(images/bgr.jpeg) !important;
}

/* 方式2：设置html+body确保全屏覆盖，同时补充显示属性 */
html, body {
  height: 100%;
  margin: 0;
  background-image: url(images/bgr.jpeg);
  background-repeat: no-repeat;
  background-size: cover; /* 让图片铺满屏幕 */
  background-position: center; /* 居中显示 */
}

3. 验证图片本身是否可访问 #

• 检查文件名大小写：比如Bgr.jpeg和bgr.jpeg在Linux/服务器环境下是两个不同的文件
• 直接在浏览器地址栏输入图片的完整URL，确认图片是否能正常打开，排除文件损坏的可能

4. 补充背景显示属性 #

有时候图片已加载，但因缺少相关属性导致视觉上“没显示”：

body {
  background-image: url(images/bgr.jpeg);
  background-repeat: no-repeat; /* 避免图片重复平铺 */
  background-size: cover; /* 按比例覆盖整个视口 */
  background-attachment: fixed; /* 可选：滚动页面时图片固定 */
}

内容的提问来源于stack exchange，提问作者Ismail Ibikunle