How to set background image for Angular component?

Question

In my angular app I would like to set a background image for a specific view.

To this end, I added the following to the css-file of a component:

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

However, the background doesn't change.

This the the file path of the file containing the css-code shown above:

angular-app/src/app/users/profile/profile.component.css

... and this is the file path of the background-image:

angular-app/src/assets/images/backgroundImage.jpg

---

I also tried

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

... but this resulted in a warning during compilation and didn't work either.

What am I doing wrong?

---

I gave the root element class "root" and then put the following into the css-file:

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

... now the background changes but not for the whole vertical length of the screen (the lower part remains white):

Answer 1

I will add another answer for this because its totaly different from my previous answer

in your component import ViewEncapsulation from angular/core

import { ..., ViewEncapsulation } from '@angular/core';

In your @component metatag add encapsulation: ViewEncapsulation.None,

@Component({
  ...
  encapsulation: ViewEncapsulation.None,
  ...
})

This has a side effect though, all styles in your component will be available to all other components once it loads.

You can check more about it on the Angular page