Referencing an image path from a page bundle in SCSS


#1

I’m trying to reference an image in a page bundle in a custom class, which I want to compile with the rest of the CSS.

Image is stored in:
/content/work/project-name/header/custom-header.jpg

CSS is

.header-for-project {
  background: url('../../content/work/project-name/header/custom-header.jpg');
}

SCSS is stored in /src/sass

Error I get upon compiling when I view the image in the web inspector is:

Cannot GET /content/work/project-name/header/custom-header.jpg

Is content in page bundles only restricted to compilation from the markdown within the bundle itself?


#2

We would need to see your full project to help you. Please see requesting help.

But to start, is src/sass/ under assets/ or static/ ?


#3

src is at the project root. I am using the atlas config.

content is at the project root.


#4

Okay, so per the gulp file, your generated CSS will end up at static/css/, which will become /css/ at the root when your site is generated. So update your background image URL accordingly.


#5

Ah, that’s what I didn’t connect. Thanks. I has assumed that the pipeline would update the pathing.