title: How to set background image for Angular component?
body: <p>In my angular app I would like to set a background image for a specific view.</p>
  
  <p>To this end, I added the following to the css-file of a component:</p>
  
  <pre><code>body {
         background-image: url("../../../assets/images/backgroundImage.jpg");
     }
  </code></pre>
  
  <p>However, the background doesn't change.</p>
  
  <p>This the the file path of the file containing the css-code shown above:</p>
  
  <p>angular-app/src/app/users/profile/profile.component.css</p>
  
  <p>... and this is the file path of the background-image:</p>
  
  <p>angular-app/src/assets/images/backgroundImage.jpg</p>
  
  <hr>
  
  <p>I also tried </p>
  
  <pre><code>body {
         background-image: url("assets/images/backgroundImage.jpg");
     }
  </code></pre>
  
  <p>... but this resulted in a warning during compilation and didn't work either.</p>
  
  <p>What am I doing wrong?</p>
  
  <hr>
  
  <p>I gave the root element class "root" and then put the following into the css-file:</p>
  
  <pre><code>.root {
     background-image: url("../../../assets/images/backgroundImage.jpg");
  }
  </code></pre>
  
  <p>... now the background changes but not for the whole vertical length of the screen (the lower part remains white):</p>
  
  <p><a href="https://i.stack.imgur.com/v1Ub3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/v1Ub3.png" alt="enter image description here"></a></p>