title: Cannot import from public folder in CSS Create React App
body: <p>In a project bootstrapped with Create React App, in my <code>public</code> folder I have a <code>assets</code> folder with the file <code>logo512.jpg</code>.</p>
  <p>When I reference the file in a component like so</p>
  <pre><code>&lt;div&gt;
      &lt;img src='/assets/logo512.jpg'/&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I everything works perfectly. However, when I reference the same file in a CSS file for the same component like so:</p>
  <pre><code>background {
      background-image: url('assets/logo512.jpg');
  }
  </code></pre>
  <p>Then the error <code>Can't resolve '/assets/logo512.jpg' in DIRECTORY_OF_COMPONENT/assets/logo512.jpg</code></p>
  <p>Note that DIRECTORY_OF_COMPONENT is not the public folder but the folder the CSS file is in. How do I make it so the url references the public folder instead?</p>
  <p>Below is the full code along with my file structure:</p>
  <pre><code>// HomePage.js
  
  import React from 'react';
  import 'tachyons';
  import './HomePage.css';
  
  function HomePage() {
      return (
          &lt;div className=&quot;background tc&quot;&gt;
              &lt;div&gt;
                  &lt;img src='/assets/logo512.jpg'/&gt; //this works 
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  
  export default HomePage;
  
  
  
  // HomePage.css
  .background {
      height: 100%;
      display: flex;
      align-content: center;
      justify-content: center;
      background: url('/assets/logo512.jpg'); //this does not work
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/YDF7S.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YDF7S.png" alt="File Structure" /></a></p>