Gatsby/React SASS Background-Image

Question

How to specify background image in global SASS stylesheet? Within the \"src\" folder I have a \"sass\" folder contain a stylesheet with the following:

background         


        

Answer 1

Edit: While the below solution does work, it is not ideal for the reasons described in the Importing Assets Directly Into Files and Using the Static folder docs pages.

Importing assets directly has these benefits for image and font files:

• Missing files cause compilation errors instead of 404 errors for your users.
• Result filenames include content hashes so you don’t need to worry about browsers caching their old versions.

After OP added update about gatsby-plugin-react-svg misconfiguration causing the issue I went back and tried using an assets folder in src instead of static at the root level and everything works fine.

Original answer:

In the Importing Assets Directly Into Files docs page you link to in your comment it says up top:

There are two major ways to import assets, such as images, fonts, and files, into a Gatsby site. The default path is to import the file directly into a Gatsby template, page, or component. The alternative path, which makes sense for some edge cases, is to use the static folder.

You can create a folder named static at the root of your project. Every file you put into that folder will be copied into the public folder. E.g. if you add a file named sun.jpg to the static folder, it’ll be copied to public/sun.jpg

You can then refer to it in your stylesheet like so:

body {
  background-image: url(/puppy.jpg);
}

All that said, there is another similar question here where the OP answers their own question with a much more complicated solution, but if I were to answer that one I would suggest they move the fonts folder into the Static folder and follow a similar approach to the one outlined above.