After reviewing the Gatsby documentation, it appears that referencing background images is done in a similar manner to other CSS properties:
.image {
background-image: url(./image.png);
}
However, one aspect not addressed is the specific location where these images should be stored. Despite trying various directories such as the src folder, layout folder, and root folder, I consistently encounter the following error message:
Loader /Users/username/Sites/my-app/node_modules/url/url.js?{"limit":10000,"name":"static/[name].[hash:8].[ext]"} didn't return a function
@ ./~/css-loader!./~/postcss-loader!./src/layouts/index.css 6:400-435
Therefore, I am seeking clarification on the correct method for referencing a background image within Gatsby.
Current directory structure:
my-app
- src
-- images
--- image.png
-- layouts
--- index.css