网站background-image的relative path配置失败，替换src为url仍无法解决

首先纠正关键错误：CSS的background-image属性必须用url()包裹路径，不能换成src——src是HTML标签（如<img>）的专属属性，在CSS规则里完全不生效。

下面根据常见的项目目录结构，梳理相对路径的正确写法：

常见目录场景与对应路径写法 #

场景1：HTML与图片在同一目录 #

目录结构示例：

├── index.html
└── paper.gif

直接使用文件名即可：

body {
  background-image: url("paper.gif");
  background-color: #cccccc;
}

场景2：图片在HTML的子目录中 #

目录结构示例：

├── index.html
└── images/
    └── paper.gif

路径需包含子目录名：

background-image: url("images/paper.gif");

场景3：HTML在子目录，图片在根目录 #

目录结构示例：

├── paper.gif
└── pages/
    └── index.html

用../跳转至上一级目录：

background-image: url("../paper.gif");

场景4：多层目录嵌套 #

目录结构示例：

├── assets/
│   └── images/
│       └── paper.gif
└── src/
    └── pages/
        └── index.html

叠加../逐级向上跳转：

background-image: url("../../assets/images/paper.gif");

快速排查方法 #

• 直接在浏览器地址栏输入你写的相对路径（拼接域名后，如http://your-domain/images/paper.gif），能打开图片说明路径正确，打不开则路径有误。
• 检查文件名大小写：Linux或类Unix服务器会区分大小写，比如Paper.gif和paper.gif会被识别为不同文件。
• 确认图片文件未损坏、格式兼容（如gif、jpg、png等均支持）。

内容的提问来源于stack exchange，提问作者Robby V