HTML背景图片无法显示：路径正确却提示文件不存在

问题描述 #

我在CSS的body选择器中设置了background-image的URL，且已将CSS文件关联到HTML文件，但在谷歌浏览器中背景图不显示。我确认图片路径正确、文件确实存在，但控制台仍提示“GET file:///C:/CSS/Images/barcelonastadium.jpg net::ERR_FILE_NOT_FOUND”错误。

相关代码如下：

CSS代码 #

body  {
    background-image: url("/CSS/Images/barcelonastadium.jpg");
  } 

HTML代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title> Barcelona </title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='./CSS/home.css'>
</head>
<style>

</style>
<body>
    <h1> Barcelona </h1>
</body>
</html>

文件夹结构：

解决步骤 #

1. 替换转义引号：CSS中无需使用HTML转义字符"，直接换成正常的双引号或单引号，否则会导致路径解析异常。
2. 修正路径类型：原路径/CSS/Images/barcelonastadium.jpg是磁盘根目录的绝对路径，而你的图片实际在CSS文件夹的子目录里。以CSS文件所在位置为基准，使用相对路径./Images/barcelonastadium.jpg（或简写为Images/barcelonastadium.jpg）即可正确定位图片。

修正后的CSS代码：

body {
    background-image: url("./Images/barcelonastadium.jpg");
}

最后检查：确认CSS文件夹下的Images子目录中确实存在barcelonastadium.jpg，且文件名大小写完全匹配（避免部分环境下的大小写敏感问题）。

内容的提问来源于stack exchange，提问作者Uvejs Gjelaj