7

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?

2 Answers 2

4

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');
}
2
  • This works fine when I add it to my CSS file. However, because I'm using SASS, the dashes don't compile right. Does this mean I have to manually add the dashes after the SASS compiles? Is there any way to get this to work with SASS?
    – huijing
    May 7, 2014 at 6:08
  • maybe you could set a variable in your config.rb and have that compile with the YAML block?
    – Jason
    Sep 16, 2014 at 20:57
4

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')

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.