如何为Jekyll minima主题添加全屏背景图片？

第一步：修正图片路径的正确写法 #

Jekyll的路径解析依赖site.baseurl变量适配本地开发与线上部署环境，直接写相对路径易出错。针对你将图片放在主仓库about目录的情况，CSS路径需这么写：

.hero {
  background: url('{{ site.baseurl }}/about/pic.jpg');
}

注意：若你的CSS文件是.scss格式，要确保它能解析Liquid语法——要么把文件后缀改成.scss.liquid，要么在项目根目录的assets/css/main.scss（Minima主题默认支持的自定义样式文件）里添加这段代码。

第二步：实现全屏背景的完整样式 #

要达到目标网站的全屏背景效果，需补充CSS属性确保图片铺满窗口：

.hero {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url('{{ site.baseurl }}/about/pic.jpg') no-repeat center center / cover;
  z-index: -1; /* 将背景置于内容下方，避免遮挡文字 */
}

• no-repeat：防止图片重复平铺
• center center：让图片在窗口中居中显示
• cover：按比例拉伸图片，确保完全覆盖窗口
• position: fixed：固定背景位置，滚动页面时背景保持不动

第三步：排查常见错误点 #

1. 文件名大小写：GitHub Pages等部署环境基于Linux，区分文件名大小写，确认图片文件名是pic.jpg而非Pic.jpg或其他大小写组合
2. 图片位置：检查about目录下确实存在pic.jpg，未放错目录层级
3. 本地运行方式：必须用jekyll serve启动本地服务，不能直接打开生成的HTML文件——直接打开会导致相对路径解析错误
4. 样式优先级：若Minima主题默认样式覆盖了自定义样式，可临时给.hero属性加!important，或调整样式加载顺序

推荐的最佳实践 #

更稳妥的方式是把图片放到Jekyll官方推荐的assets/images目录（比如assets/images/about/pic.jpg），路径写法改为：

background: url('{{ site.baseurl }}/assets/images/about/pic.jpg');

这种方式能确保Jekyll正确处理静态资源，避免部署时出现路径问题。

内容的提问来源于stack exchange，提问作者A. Drew