Background image in CSS not found

I’m trying to import an image in my css, specifically in the styles/layouts/_pages.scss file. My image is in the assets/images folder and even shows up in dist/images.

.section-story {
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('./dist/images/euronative.jpg');
  background-size: cover;
  color: $white;
  background-attachment: fixed;
}

I’m getting the following error:

ERROR in ../dist/images/euronative.jpg
Module parse failed: /srv/http/foa/wp-content/themes/foa/dist/images/euronative.jpg Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.

Does anyone have some idea what the image path should be or if there is some other issue?

1 Like

Use a relative path from the entry point, i.e., ../images/euronative.jpg

Now I get this error in the console:

http://localhost:3000/app/themes/sage/dist/images/euronative.jpg Failed to load resource: the server responded with a status of 404 (Not Found)

I’m not using Bedrock/Trellis. Is that why the app folder is expected?