Angular 2 Load CSS background-image from assets folder : <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>
