title: Angular 2 Load CSS background-image from assets folder
body: <p>My folder structure looks like</p>
  
  <pre><code>-myapp
      -assets
          -home-page-img
              -header-bg.jpg
      -src
          -app
          -home-page
              -home-page.component.css
              -home-page.component.html
              -home-page.component.ts
  </code></pre>
  
  <p>Inside my home-page.component.css, I have the following</p>
  
  <pre><code>header {
      width: 200px;
      height: 200px;
      background-image: url('/src/assets/home-page-img/header-bg.jpg');
  }
  
  My angular-cli.json
      "assets": [
      "assets",
      "favicon.ico"
  ]
  </code></pre>
  
  <p>When I run the code, I get</p>
  
  <pre><code>GET http://localhost:4200/src/assets/home-page-img/header-bg.jpg 404 (Not Found)
  </code></pre>
  
  <p>For demonstrating purpose, If I change background-image to the following, I get a whole different error</p>
  
  <pre><code>background-image: url('assets/home-page-img/header-bg.jpg');
  
  ./src/app/home-page/home-page.component.css
  Module not found: Error: Can't resolve './assets/home-page-img/header-bg.jpg' in '/Users/JohnSmith/Desktop/my-app/src/app/home-page'
  </code></pre>
  
  <p>How can I get that image to load?</p>