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

URL path is fine. You can click the link in the styles box and open the image with the provided url — Colonel Mustard
– Colonel Mustard, Commented Sep 27, 2017 at 22:40
Yes, I get a compilation error if the URL isn't resolved, but there are no http requests for the file — Colonel Mustard
– Colonel Mustard, Commented Sep 27, 2017 at 22:44

P.S. · Accepted Answer · 2017-09-27 23:01:06Z

3

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); }

edited Sep 27, 2017 at 23:01

answered Sep 27, 2017 at 22:44

P.S.

16.4k14 gold badges65 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

P.S. Over a year ago

@mcgowan.b, I don't see, assets folder is inside src? There are no parent folders between them?

P.S. Over a year ago

@mcgowan.b, I have updated the answer with one more try to help, it's at the bottom (about content), try this one.

Colonel Mustard Over a year ago

this overlays the image over the entire page, so I only see the image

P.S. Over a year ago

@mcgowan.b, you need to add some magic via CSS, I'm using content method in my projects, and it's only the way it works. Try to add another one div and set content property to it (and other needed styles too).

Collectives™ on Stack Overflow

Angular 2 background image not rendering

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related