Angular 2 background image not rendering

Question

I have an Angular 2 app that has a single component currently. For the entire page, I want to render a background image on the page. I have done the following: app.component.html

<dashboard class="dash"></dashboard>

app.component.css

.dash {
    background-image: url("../assets/images/background/sligo.jpg");
}

in the dev tools in chrome, the image is showing up, but on the actual view, it still shows a blank screen. What am I missing? The below snip shows the console output and the main view.

Additional info; here's a snip of my package.json and the folder structure

Answer 1

You need to specify assets and root properties correctly in your .angular-cli.json, for example:

And the structure of my project:

And you should use content instead of background-image, like this:

.dash {
    content: url(../assets/images/background/sligo.jpg);
}