在Spring Boot项目中，使用CSS设置背景图片时路径的处理需要结合框架的静态资源加载规则，否则很容易出现图片无法加载的问题。Spring Boot对静态资源有默认的存放和访问规范，理解这些规范是正确设置路径的前提。
Spring Boot静态资源的默认配置
Spring Boot默认会从以下几个目录中加载静态资源，这些目录在项目的src/main/resources路径下：
staticpublicresourcesMETA-INF/resources
其中static是最常用的静态资源存放目录，我们通常会把图片、CSS、JS等文件放在这个目录下。默认情况下，这些目录下的资源可以直接通过根路径访问，比如把图片bg.jpg放在src/main/resources/static/images/目录下，那么访问路径就是/images/bg.jpg。
CSS中背景图片路径的写法
根据CSS文件所在的位置不同，背景图片的路径写法也会有所区别，常见的场景有两种。
场景一：CSS文件放在static目录下
如果CSS文件直接放在static/css/目录，图片放在static/images/目录，那么CSS中设置背景图片的路径可以写成相对路径或者绝对路径。
相对路径的写法：因为CSS文件和images目录在static目录下是同级的，所以可以通过../images/bg.jpg来访问图片，示例代码如下：
/* 位于 static/css/style.css */
.page-bg {
background-image: url('../images/bg.jpg');
background-size: cover;
}
绝对路径的写法：直接使用从根目录开始的路径，不需要考虑CSS文件的位置，示例代码如下：
/* 位于 static/css/style.css */
.page-bg {
background-image: url('/images/bg.jpg');
background-size: cover;
}
场景二：CSS文件放在templates目录下
如果使用的是Thymeleaf等模板引擎，CSS文件可能放在src/main/resources/templates/css/目录，此时CSS文件不属于静态资源目录，访问静态图片需要通过绝对路径来写，示例代码如下：
/* 位于 templates/css/style.css */
.page-bg {
background-image: url('/images/bg.jpg');
background-size: cover;
}
常见路径错误及解决方法
错误1：路径开头多了多余的前缀
有些开发者会写成url('static/images/bg.jpg')，这样会导致路径错误，因为static目录是默认的静态资源根目录，访问时不需要加static前缀，正确的写法是url('/images/bg.jpg')。
错误2：相对路径计算错误
如果CSS文件的层级比较深，比如放在static/css/user/目录，图片放在static/images/目录，那么相对路径应该是../../images/bg.jpg，如果少写了../就会导致路径找不到。这种情况建议优先使用绝对路径，减少层级计算的错误。
错误3：自定义了静态资源路径
如果在配置文件中自定义了静态资源的访问前缀，比如配置了spring.mvc.static-path-pattern=/static/**，那么访问图片的路径需要加上/static前缀，即url('/static/images/bg.jpg')。对应的配置示例如下：
# application.properties配置 spring.mvc.static-path-pattern=/static/** spring.web.resources.static-locations=classpath:/static/
路径验证方法
如果不确定路径是否正确，可以先在浏览器中直接访问图片地址，比如输入http://localhost:8080/images/bg.jpg，如果能正常显示图片，说明路径是正确的，再把这个路径放到CSS的url()中即可。如果浏览器访问不到图片，就需要检查图片的存放位置和静态资源配置是否正确。
Spring_BootCSS背景图片静态资源路径解析修改时间：2026-06-15 19:18:14