Referencing an image path from a page bundle in SCSS

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?

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/ ?

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

content is at the project root.

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.

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