background-image外部样式表失效，内联正常，求助排查

问题核心 #

内联CSS能显示图片但外部样式表不行，本质是相对路径的基准不同：

• 内联CSS的路径是相对于HTML文件的位置
• 外部CSS的路径是相对于CSS文件本身的位置

看你的代码细节：

• HTML在根目录，内联url("LagoDiBraies.jpg")能显示，说明图片实际在根目录
• 但你的CSS文件放在css/styles.css里，写url("LagoDiBraies.jpg")会去css/目录下找图片，自然找不到

两种解决办法 #

办法1：修正CSS里的路径 #

用../跳出css/目录回到根目录，再指向图片：

.header {
  background-image: url("../LagoDiBraies.jpg");
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
}

办法2：调整文件位置 #

把LagoDiBraies.jpg移到css/文件夹里，和styles.css放在同一目录，原来的CSS代码就不用改。

快速验证 #

按F12打开浏览器开发者工具，查看.header元素的背景图片资源状态，如果显示404，就说明路径确实错了，修正后刷新再看即可。

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