How to use Jekyll baseurl in css files

Question

I'm using Jekyll to host a site on Github pages. The problem lies in referencing file paths within css files.

I'd like to do something like this:

body { {background: #FFF url('{{ site.baseurl}}/images/page_bg.JPG') center 0 no-repeat; background-attachment: fixed; color: #4b595f; }

But it doesn't seem that Jekyll process the css files, so site.baseurl never gets swapped out.

There are other situations where I can't just change it to an inline style, so assume that's not a possibility.

Answer 1

Using the trick from Brian Willis' answer won't work with SASS in @import-ed files.

Instead, you can do this:

main.scss

---
---
$baseurl: "{{ site.baseurl }}";
@import "myfile";

_sass/_myfile.scss

myclass {
  background: url($baseurl + "/my/image.svg");
}

---

Don't forget

• the quotes around "{{ site.baseurl }}" (important in case of empty site.baseurl, and probably more robust) and
• the plus sign with $baseurl + "/my/image.svg".

Answer 2

Jekyll processes all files that have YAML front matter. Stick a front matter section (even if it's empty) at the beginning of your file, and Jekyll will transform it correctly. Try using this at the start of the file:

---
title: CSS stylesheet
---