# Scss specific background image link

**URL:** <https://talk.jekyllrb.com/t/scss-specific-background-image-link/766>\
**Category:** Uncategorized\
**Created:** [July 10, 2017, 11:49am UTC](https://talk.jekyllrb.com/t/scss-specific-background-image-link/766 "2017-07-10T11:49:48Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![sparky](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/sparky/32/317_2.png) [@sparky](https://talk.jekyllrb.com/u/sparky)\
**Post date:** [July 10, 2017, 11:49am UTC](https://talk.jekyllrb.com/t/scss-specific-background-image-link/766/1 "2017-07-10T11:49:48Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![mmistakes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/mmistakes/32/2169_2.png) [@mmistakes](https://talk.jekyllrb.com/u/mmistakes)\
**Post date:** [July 10, 2017, 1:05pm UTC](https://talk.jekyllrb.com/t/scss-specific-background-image-link/766/2 "2017-07-10T13:05:45Z")

</div>

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

```auto
---
---

```

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:

```auto
$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:

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

```

---

<div class="post-metadata">

**Author:** ![sparky](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/sparky/32/317_2.png) [@sparky](https://talk.jekyllrb.com/u/sparky)\
**Post date:** [July 10, 2017, 1:47pm UTC](https://talk.jekyllrb.com/t/scss-specific-background-image-link/766/3 "2017-07-10T13:47:37Z")

</div>

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 😃

Ty…