Scss specific background image link

So… All of my images work fine with with the following

<img src="{{ site.baseurl }}/images/flex/flex-shopping.jpg" alt="">

or

<img src="{{ site.baseurl }}/images/cards/card-greenhead.jpg" alt="">

(which is at my GitHub testing the Bourbon refills - flexbox and cards.)

However this does not work for me at all when I try in my scss file for the background image…

.bgimage {
background-image: url('{{ site.baseurl }}/images/header/banner.png');

I can work around it with my full path…

.bgimage {
background-image: url('https://chipsandcurrysauce.github.io/from-scratch/images/header/banner.png');

So its not much of a problem… Just wondering why it won’t work for bgimages or if anyone else has come across and resolved this in the past…

Jekyll won’t process Liquid unless the file has YAML Front Matter… e.g.

---
---

It’s likely your main stylesheet has the YAML Front Matter blocks, so what you could do is add a Sass variable to that like:

$baseurl: "{{ site.baseurl }}";

Which if processed correctly will populate the $baseurl variable with the correct value from site.baseurl.

And then you can reference that wherever you need it in your other partials or stylesheets:

.bgimage {
  background-image: url('#{$baseurl}/images/header.png');
}

Ah right… So for scss/css specific… Set specific variables in the main sass file rather than the liquid format used in other file types.

Thanks for the heads up and “How to”

all done… I think I’m getting there bit by bit.

You make it sound so darned simple… you should get a job in this web dev stuff m8 heh :smiley:

Ty…