title: Reference file in public folder from CSS in create-react-app
body: <p>I am using creat-react-app (CRA) and simply want to include a png file placed in the public folder via CSS (I keep all image files there).
  Now I am trying to reference this image via CSS (I only added the <code>background-image</code> line to a freshly generated CRA app):</p>
  
  <pre><code>.App-header {
    background-color: #222;
    height: 150px;
    padding: 20px;
    color: white;
    background-image: url("../public/example.png");
  }
  </code></pre>
  
  <p><code>You attempted to import example.png which falls outside of the project src/ directory</code></p>
  
  <p><strong>How do I reference the image file from within the CSS-file without copying somewhere inside <code>/src</code>? I also don't want to eject the application and get rid of the error message.</strong></p>
  
  <p>Edit: This question is different from <a href="https://stackoverflow.com/questions/44114436">The create-react-app imports restriction outside of src directory</a> because it does not show how to solve this problem at a CSS level. The proposed solution is to add the style inside the JavaScript file which I don't want to do.</p>