CSS中添加的背景图片无法显示，请求排查原因

1. 核对图片路径是否正确 #

这是最常见的故障原因，路径错误会直接导致图片加载失败：

• 若图片与CSS文件在同一目录：background-image: url('bg.jpg');
• 若图片在CSS的上级目录：background-image: url('../bg.jpg');
• 若图片在子目录（如images文件夹）：background-image: url('images/bg.jpg');
• 注意路径区分大小写，Linux/macOS环境下Bg.jpg和bg.jpg会被识别为不同文件。

2. 确认图片本身无异常 #

• 文件名避免特殊字符（空格、中文），建议用英文小写加下划线命名，比如hero_bg.jpg
• 直接在浏览器地址栏输入图片的绝对路径（如http://localhost:5500/images/bg.jpg），测试图片是否能正常打开，排查图片损坏问题。

3. 检查目标元素的尺寸 #

如果元素未设置宽高，背景图片会因没有可显示的区域而无法看见：

.your-target-element {
  width: 100%;
  min-height: 400px;
  background-image: url('images/bg.jpg');
  background-size: cover; /* 可选，让图片铺满元素 */
}

4. 验证CSS属性写法规范 #

• 确保属性值的引号（单/双引号均可）使用正确，无遗漏
• 使用background简写属性时，遵循正确顺序：background: 颜色 图片 重复方式 位置/尺寸;
  示例：background: #f5f5f5 url('bg.jpg') no-repeat center/cover;

5. 排查Live Server配置问题 #

• 确认Live Server的根目录是项目根文件夹，而非子文件夹，否则相对路径会出错
• 打开浏览器控制台（F12），切换到「Network」标签，刷新页面后查看图片请求状态：
  • 显示404说明路径错误；显示200但仍看不见，检查元素尺寸或CSS优先级。

内容的提问来源于stack exchange，提问作者Elizabeth Vallejo