github pages 部署后背景图不显示，通常源于相对路径解析错误或资源路径未适配 github pages 的子目录结构；本文详解路径规范、css 引用方式及调试技巧，助你一次性解决静态资源加载问题。
github pages 部署后背景图不显示，通常源于相对路径解析错误或资源路径未适配 github pages 的子目录结构；本文详解路径规范、css 引用方式及调试技巧，助你一次性解决静态资源加载问题。
在 GitHub Pages 上部署静态网站时，背景图片（如 background-image: url(...)）无法显示是高频问题——本地开发（VS Code Live Server）一切正常，但上线后空白或控制台报 404 错误。根本原因在于：GitHub Pages 默认将仓库作为子路径托管（例如 https://username.github.io/repo-name/），而 CSS 中的相对路径会相对于当前 HTML 页面位置解析，而非项目根目录。
以你的项目 bautitobal/mi-portfolio 为例，其 GitHub Pages 地址为 https://bautitobal.github.io/mi-portfolio/，这意味着整个站点实际运行在 /mi-portfolio/ 子路径下。若你在 CSS 中写：
.inicio {
background-image: url('img/fondo.jpg'); /* ❌ 错误：浏览器尝试请求 /img/fondo.jpg */
}浏览器会从域名根路径 / 开始查找 img/fondo.jpg，而非 /mi-portfolio/img/fondo.jpg，导致 404。
✅ 正确做法是使用相对于 CSS 文件位置的相对路径。假设你的 CSS 文件位于 css/style.css，图片位于 img/fondo.jpg，则路径应向上回退一级再进入 img：
.inicio {
background: linear-gradient(to top, rgba(30, 35, 38, .8), rgba(30, 35, 38, 1)),
url('../img/fondo.jpg'); /* ✅ 正确：从 css/ 目录上一级进入 img/ */
}? 验证技巧：打开浏览器开发者工具（F12）→ Network 标签页 → 刷新页面 → 查找 fondo.jpg 请求，观察其 Request URL 是否为 https://bautitobal.github.io/mi-portfolio/img/fondo.jpg。若显示 /img/fondo.jpg，说明路径错误；若显示完整子路径但仍 404，请检查文件大小写、扩展名（.jpg vs .JPG）及是否已提交到 GitHub（Git 区分大小写且不跟踪未 commit 文件）。
? 关键注意事项：
- GitHub Pages 严格区分文件名大小写：Fondo.jpg ≠ fondo.jpg；
- 确保图片已 git add img/fondo.jpg && git commit -m "add bg" 并推送到 GitHub；
- 避免使用绝对路径（如 /img/fondo.jpg），它始终指向域名根目录，不兼容子路径部署；
- 若需更高可移植性，可借助 Jekyll 变量（如 {{ site.baseurl }}）或构建工具（Vite、Webpack）自动处理公共路径。
? 进阶建议：在 index.html 的 <head> 中添加基路径声明（仅适用于纯 HTML/CSS 项目）：
<base href="/mi-portfolio/">
但需谨慎——这会影响所有相对链接（包括 <a> 和 <script>），推荐优先采用 ../ 相对路径方案，简洁可控。
最后，重新部署后清空浏览器缓存（或使用无痕模式测试），确保加载的是最新资源。路径问题本质是“上下文错位”，理解 GitHub Pages 的 URL 结构与 CSS 路径解析逻辑，即可彻底规避此类陷阱。
