如何在WordPress子主题首页正确设置背景图片路径？

AI 小北

2026-5-29

解决WordPress子主题首页背景图片路径失效问题

咱们一步步排查问题，帮你搞定这个背景图的事儿：

先确认图片位置是否正确
先检查子主题的文件夹结构，确保about-banner.jpg确实放在子主题根目录下的images文件夹里。比如你的子主题叫my-child-theme，那正确路径应该是my-child-theme/images/about-banner.jpg，别把图片放错到父主题文件夹里了。
优化代码的语法与安全性
你当前的代码可以调整得更严谨一些，既保证URL安全，又能让图片正常显示：
```
<div class="item" style="background: url('<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/images/about-banner.jpg') no-repeat center center / cover;">
```
这里加了esc_url()函数过滤URL，避免潜在的安全风险；同时补充了no-repeat center center / cover属性，让图片自适应容器、居中铺满且不重复。
排查CSS优先级冲突
有时候行内样式会被主题的CSS规则覆盖。你可以按F12打开浏览器开发者工具，查看.item元素的样式面板，看看背景图片的规则是不是被划掉了。如果是，建议把样式写在子主题的style.css里，优先级更高：
```
.item {
    background: url('images/about-banner.jpg') no-repeat center center / cover;
}
```
子主题CSS文件里的相对路径是相对于CSS文件本身的，所以直接写images/about-banner.jpg就生效，不用再写PHP函数。
强制刷新缓存
浏览器缓存可能会导致新的图片路径不生效，按Ctrl + F5强制刷新页面，或者清除浏览器缓存后再测试。