在Jekyll样式表中设置背景图像

Question

鉴于我在Jekyll网站上有以下标记：

<header>
  <hgroup>
    <h1>Page title</h1>
    <h2>Page subtitle</h2>
  </hgroup>
</header>

我尝试使用CSS应用背景图片，但是，我需要使用{{site.baseurl}}变量，以便正确解析图像文件的位置。不幸的是，以下代码不起作用：

header {
  background-image: url('{{ site.baseurl }}/img/bicycle.jpg');
}

内联样式实际上可以与{{site.baseurl}}一起使用，以下代码可以使用。

<header style="background-image: url('{{ site.baseurl }}/img/bicycle.jpg');">

但我真的不想使用内联样式。将背景图像应用于Jekyll网站的方法是什么？

Answer 1

在CSS文件中，将空YAML块添加到文件中，Jekyll将渲染它。

CSS文件：

---
---

header {
  background-image: url('{{ site.baseurl }}/img/bicycle.jpg');
}

Answer 2

我设法通过在我的_config.yml文件中设置网址来实现它：

# Site settings
url: "http://www.SITE_DOMAIN.com" 

当设置为：

时，背景图像属性现在可以使用

background-image: url('/images/IMAGE_NAME.jpg')