Scss specific background image link

1

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…

2

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');
}
3

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…