Setting background images in Jekyll stylesheets

Question

Given that I have the following markup on my Jekyll site:

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

I'm trying to apply a background image it using CSS, however, I need to use the {{ site.baseurl }} variable so the location of the image file is parsed correctly. Unfortunately, the following code does not work:

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

Inline styles actually do work with {{ site.baseurl }} and the below code works.

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

But I really don't want to use inline styles. What is the method to apply background images to Jekyll sites?

Answer 1

I managed to get it to work by setting the url in my _config.ymlfile like so:

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

The background image property now works when set to:

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

Answer 2

In your CSS file, add an empty YAML block to the file, and Jekyll will render it.

CSS file :

---
---

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