如何用CSS设置背景图？设置时出现404错误求助

云原生阿岚

2026-8-17

CSS背景图404问题解决方案

问题分析

当前请求地址是http://127.0.0.1:5500/css/img/example.jpg，但图片实际存放在项目的img文件夹中，说明CSS里的相对路径是基于CSS文件所在位置解析的，而非HTML文件。如果你的CSS文件在css文件夹下，当前代码里的url(img/example.jpg)会让浏览器去css/img/下找图片，自然找不到。

解决方法

调整相对路径：如果项目结构是根目录下有css和img两个同级文件夹，把路径改成../img/example.jpg，表示从CSS所在的css文件夹回到上一级（根目录），再进入img文件夹：
```
body {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0,0.7)), url(../img/example.jpg);
    background-size: cover;
    background-position: center;
    height: 100vh;
}
```

使用根绝对路径：直接从项目根目录指定路径，写法是/img/example.jpg，这样无论CSS文件放在哪里，浏览器都会从根目录开始查找img文件夹：

body {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0,0.7)), url(/img/example.jpg);
    background-size: cover;
    background-position: center;
    height: 100vh;
}