如何在Spring Boot中通过CSS正确设置背景图片？

核心原因是内联样式与外部CSS的路径基准不同：

• 内联样式的路径以当前HTML页面的访问URL为基准（比如http://localhost:8080/）
• 外部CSS的路径以CSS文件自身的访问URL为基准（比如http://localhost:8080/css/main.css）

解决方案 #

方案1：使用绝对路径（推荐，不受文件位置变动影响） #

在main.css中直接使用根路径开头的绝对路径，Spring Boot会自动映射static目录下的资源：

body {
    background-color: #193340;
    background-image: url("/img/mainpage.jpg");
}

这个路径会直接指向src/main/resources/static/img/mainpage.jpg，无论CSS文件放在哪个子目录都能生效。

方案2：使用相对路径（根据文件结构调整） #

如果你的文件结构是：

• src/main/resources/static/
  • img/ → 存放mainpage.jpg
  • css/ → 存放main.css
    那么CSS中的相对路径需要向上跳转一级，再指向img目录：

body {
    background-color: #193340;
    background-image: url("../img/mainpage.jpg");
}

验证步骤 #

1. 直接访问http://localhost:8080/img/mainpage.jpg，确认图片能正常显示，排除资源本身的问题
2. 检查图片文件名、扩展名的大小写（Linux环境下区分大小写）
3. 确认图片确实放在src/main/resources/static/img/目录下

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