Root path in css (Jekyll)

Question

I use variable {{ root_url }} to access root path (/) of my website (Jekyll). For eg. I can use it to include the path of external css file.

    <link rel="stylesheet" href="{{ root_url }}/css/main.css">

However in my css/main.css, I cant access {{ root_url }} for eg.

input {
    background: url(/{{ root_url }}/img/search-icon.png);
}

The image is not displayed as {{ root_url }} is not accessible inside css. How can I access {{ root_url }} inside css?

Answer 1

You could use a relative path. Since CSS is in a subfolder one level deep, then you could do this:

input {
    background: URL(../img/search-icon.png)
}

Answer 2

Only file with front matter are Liquid processed by jekyll.

If you want to use liquid in a css, you must add a front matter (even empty) in your css/main.css :

---
# this is an empty front matter that instruct jekyll
# to process this file with liquid
---
input {
    background: url(/{{ root_url }}/img/search-icon.png);
}