HTML/CSS背景图片无法加载问题排查与路径修正

问题场景 #

在HTML页面中通过CSS设置背景图片时，出现Failed to load resource: net::ERR_FILE_NOT_FOUND错误，图片无法显示。但直接在HTML中使用相同相对路径加载图片却能正常显示，初始CSS代码如下：

body {
    background-image : url('images/nightvision.jpg'); 
}

问题原因 #

HTML中引用资源的相对路径是以HTML文件所在目录为基准，而CSS中引用资源的相对路径是以CSS文件所在目录为基准。如果CSS文件存放在子目录中（比如css/文件夹），而images/文件夹和HTML文件同级，那么初始路径会让CSS在css/images/下查找图片，自然无法找到目标文件。

解决办法 #

调整CSS中的相对路径，通过../回到上一级目录（与HTML文件同级的目录），再定位到images/文件夹，修改后的代码：

body {
    background-image : url('../images/nightvision.jpg'); 
}

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