Can't get background image path in SASS to work

Help
1

Goal
Set a background image in SASS that references a configuration defined in other pages (my config.yml and other page’s front matter featImg: project/project-widescreen.jpg). I prefer to use background-image for accessibility reasons.

My Code
The tutorial I’m following had me set up a configuration in my config.yml to define the path from the parent folder down to the page specific folder: path-to-CS-images:. I’ve tried setting it to /assets/images/case-studies/ and ../images/case-studies/ (is one better practice over the other?). So my path goes something like this:

background-image: url('/{{ site.baseurl }}{{ site.path-to-CS-images }}{{ page.featImg }}')

But it still can’t find the image. The direct path to the image does work though
background-image: url('../images/case-studies/project/project-widescreen.jpg')

Other things I’ve tried that didn’t work

  • background-image: url('#{"/{{ site.baseurl }}{{ site.path-to-CS-images }}{{ page.featImg }}"}')
  • renaming my homepage file from index.sass to index.sass.liquid.

Please let me know if I should include more of my code.

I’ve seen a few other threads on this issue, but I’m obviously missing something because I can’t get their solutions to work for me.

I know the tutorial I’m following doesn’t always follow best practices, but I’m still learning what those best practices would be, so it’s a lot of trial and error. How much of the url should I even be making Liquid? I’m going to have a lot of images on each page, should I just write out the direct path for all of them?

2

Hi.

I’d say use /assets/ as that will work from anywhere while …/images will give different results depending on if the current page is / or /foo/ or /foo/bar/

I understand your need for background URL but just for testing, I’d use something more familiar. See my example below.
Here is use markdown image.

Start from a working point and then make it more flexible.

![Alt text](/my-site/assets/foo/bar.png)

If that works then use liquid.

![Alt text]({{ site.baseurl }}assets/foo/bar.png)

Note baseurl should start with / and end with / in your config. E.g. /my-repo/

- Baseurl is {{ site.baseurl }}
- Dir is {{ site.path-to-cs-images }}
- Current image is {{ page.featImg }}

![Alt text]({{ site.baseurl }}{{ site.path-to-cs-images }}{{ page.featImg }})

You might need some slashes in your actual stored values or in the way you render it. ... }}/{{ ...

And then it that works then you can build up your CSS.

1 Like
3

And if you want to do that on each page, add it on one page to get it to work.

---
---

<style>
#my-bg {
  background-url: url(... ... {{ page.featImg }})
}
</style>

And then move style to a layout for your pages so you only have to write is once.

Maybe an if statement checking if the featImg is set first.

1 Like
4

Also you can leave your homepage as index.html or index.md (the latter will format markdown). I’ve never had to use the .liquid extension before.

If you want CSS like the background URL, that can go in a style tag. And if you have site-wide styling that can go in assets/css/styles.css or _sass/styles.scss if you want it compiled to styles.css

Check the sass dir in minima theme to see sass in action. Note that is the latest version and the minima version used on gh pages is older

1 Like
5

Hi Michael, thank you so much for your detailed reply. You are wonderful for taking the time to explain this all to me.

I had actually written out multiple variations of file location in HTML to try and get it to work. I just commented out my baseurl because I am working on this locally (and I thought I had read somewhere that jekyll will automatically set the url to the localhost) and I was able to get

<img src="{{ site.baseurl }}{{ site.path-to-CS-images }}{{ page.featImg }}" alt="">

to work, but I’m still having issues with the CSS.

I tried

  1. background-image: url('{{ site.baseurl }}{{ site.path-to-CS-images }}{{ page.featImg }}')

which returns an error in the command prompt

  • ERROR /assets/css/{{ site.baseurl }}{{ site.path-to-CS-images }}{{ page.featImg }} not found.

  1. So as a test I added / in front of {{ site.baseurl }}, and
    background-image: url('/{{ site.baseurl }}{{ site.path-to-CS-images }}{{ page.featImg }}')

returned

  • ERROR /{{ site.baseurl }}{{ site.path-to-CS-images }}{{ page.featImg }} not found.

  1. Adding #{“…”} and #{‘“…”’} to both variations did not change the errors produced.

Thank you again!

6

hmm, not sure that is the case, I think it should always have a beginning slash but thats it - like
baseurl: /blog

then you can reference it as href="{{site.baseurl}}/assets/css/site.css"

Though baseurl is just a variable and you can probably use it however you want - but I think some of the newer url filters may have an issue if you have a slash at the end as they will probably be assuming it is not there.

where is this error? I’m guessing this is a sass error? since it is not even converting the liquid into anything?

I once tried to get some front matter to work in a sass file and I don’t think it worked as I am not sure sass is compiled with liquid - it might just be sass. As I remember I did something in the css file that was pulling in the sass partials and that worked. But when it was a sass file in the actual sass folder it did not. But that was a while ago and I can’t find which ever project that was.

1 Like
7

Apologies for not clarifying, the error is being returned in the command prompt when I refresh the site after saving the code.

I thinkkk it’s a SASS error. I was thinking something similar, that the problem might lie in it not converting the Liquid to anything based on another post in here and the little other info I could find:

  1. https://ablesense.com/blogs/news/using-gulp-to-compile-sass-liquid-tags/
  2. http://www.codeshopify.com/blog_posts/using-gulp-for-sass-compilation-allows-for-sass-partials-with-liquid-tags

That’s why I tried it with #{"…"} and the #{’"…"’} suggested by the sources, but they returned the same errors. But I am having a hard time understanding partials and interpolation, so I could be implementing it incorrectly.

Thank you!

8

I’m seeing this being suggested a few times now. Is this still best practice or is it more of a workaround?

  1. Scss specific background image link
  2. https://github.com/jekyll/jekyll/issues/3646 (and the stack overflow answer linked in it).
9

right - that link in the post right above here - #1 to an answer by MM is what I am saying and I believe that is the way to go - set up a sass variable equal to your path in the main.scss file that is pulling in all the sass files - this file is not in the sass folder so with the front matter it gets processed and you can use liquid. Though the more I look at what I think you are doing I’m not sure how workable it is.

The reference to a config setting is fine - as there would be a finite number. When you are saying you want to reference it in a page variable that sort of implies an unknown number of different backgrounds, you would need a separate css section for each I think. I don’t think you can easily get a dynamic css file that changes the background on each page to a different image. Keep in mind jekyll is static so it isn’t going to change like that. I suppose you could loop thru something and duplicate the css code block to create each different pages css - but then you have to have a unique class on each one too.

Does that make sense? if your css is something like (hacky not trying to do this correctly):

div class="image-header"></div>

.image-header{background-image: url(...my pages special image...)}

You can’t do unique ones of those for each page without also making the class unique which seems like a mess.

If that is something you are trying to do I think you should probably look at doing it as css by using a element in the < head > section - not in a sass file. But that is just an idea not actually sure how that would work either. Or maybe a JS solution would be better.

So I think the problem is fixed by what that other answer says, it is just a matter of if that actually solves your problem.

1 Like
10

Sorry yes baseurl doesn’t need trailing forwardslash

Yes your SASS is not being compiled based on those errors. If you look at your sass file in the browser as well you’ll see how it is rendered, or just in _site.

Here is another project using sass based on the Jekyll docs tutorial


It just uses plain CSS but if I had liquid in there or sass variables then I would have to add frontmatter with no values at the top of the file and that’s probably you problem.

---
---
#my-img {
  ...
}

It uses SASS as a Jekyll feature with defaults but you can override values like sass directory and output type.

Agreed with commenter above. SASS is not a good fit for your usecase where you need different CSS per page so use the style tag as I suggested.

1 Like
12

Thank you so much, things are starting to make more sense now.

Could you clarify this for me?

…set up a sass variable equal to your path in the main.scss file that is pulling in all the sass files - this file is not in the sass folder so with the front matter it gets processed and you can use liquid.

Maybe I didn’t organize my files correctly, but this is how I have them setup

files
files219×952 20 KB

My style.sass is my main style sheet, and my main.sass imports my base, modules & layout folders. In the first post with the answer by MM, I see that they are suggesting to put the SASS variable in the main stylesheet (my style.sass). But you’re suggesting I add front matter to my main.sass and add the variable there? Should my main.sass not by in my _sass folder?

Let me define my goals a little more clearly to:

Primary Goal
I made a collection with a page for each of my 3 case studies. On my homepage I made a for loop to pull the pages front matter and make cards for each one. So the specific background images I’m trying to set are a featured image that will be in the card.

Secondary Goal
I think this is more along the lines of what you were describing in your example.

I was also considering doing a header for each page this way by having the header in the case study layout page pull the featured image from the pages front matter. So something like

Case Study _layout HTML page

<header class="case-studies-header"></header>

Case Study _layout SASS page

.case-studies-header
background-image: url(‘{{ page.featImg }}’)

Individual pages within case study collection

---
layout: case-study
title: "Project"
featImg: project/project-widescreen.jpg
summary: "Ramen business model canvas buzz facebook ecosystem low hanging fruit."
---

You mentioned that potentially being messy. If I’m only going to have 3 pages would this be bad practice–that’s aside from the issue of even getting it working–because it could get bloated in the future?

If that is something you are trying to do I think you should probably look at doing it as css by using a element in the < head > section - not in a sass file.

Do you mean the head.html one would define in their _includes folder? Are you suggesting putting a <style> tag in head.html (sort of like Michael suggested)? Why there and not make something like a header.html?

13

Thank you for the clarification.

The tutorial I was following was doing all of this with inline HTML, and that does seem like like the easier solution at this point :dizzy_face:. I was just hesitant to because I thought that wasn’t good practice.

About the <style> tag, you said

Just to make sure I’m understanding you correctly:

Say the page I’m trying to put a background image in is project1.html in my _case-studies collection. You’re suggestion is to put the styling directly into the html file with the <style> tag? Is that better or worse practice than just using something like <img src="{{ site.url }}{{ site.path-to-CS-images }}{{ page.featImg }}" alt="">?

14

correct - as i understand it nothing in the sass folder will be able to process liquid. You can have scss files outside of the sass folder though to import them -so you should be able to move the main.scss file (not sure the extension has to be scss?) into say assets/css then you can have front matter which means liquid can be processed.

If you had only 3 is it more workable? sure I suppose, but you will still need 3 classes in order to have 3 urls that are different. Or MC’s idea maybe fixes it. I am not so hot at css/sass.

Personally I would probably just use an img tag and you’re done. But I’m not very fancy so I can see why that may not be the best solution.

1 Like
15

I would say pick img tag or element background image based on your need.

If you want a screen reader to find the image and use the alt text or title (not sure) and read it to a user then img is good.
If you want the background image to actually be a background where you have other text over it then you probably don’t need it to be found for accessibility.

So you can then make your img on the page using img HTML tag in your layout.
Or you can make an div which has a class like bg-image and use a style tag in your layout.

Both are predictable and don’t require SASS experience.

If you have some more experience or interest you can always come back to sass later. You could use a for loop to build up CSS rules but again it doesn’t feel like a good fit to have page-specific CSS in a central spot when you can have the CSS appear only the page that needs it. And using a layout to make sure you only write the CSS once.