title: Gatsby: Set background image with CSS
body: <p>Looking at the Gatsby docs, they suggest that you can reference background images like you would anywhere else: </p>
  
  <pre><code>.image {
    background-image: url(./image.png);
  }
  </code></pre>
  
  <p>What they don't cover is where these images should live. I've tried placing the image directory in the src folder, in the layout folder, and in the root folder, but I keep getting the error: </p>
  
  <pre><code>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
  </code></pre>
  
  <p>What's the proper way to reference a background image using Gatsby?</p>
  
  <p>Current directory structure:</p>
  
  <pre><code>my-app
  - src
  -- images 
  --- image.png
  -- layouts
  --- index.css
  </code></pre>