title: How to set a responsive background image in angular 4 component
body: <p>my question is very simple, I am developing an angular 4 app, and I need to place an image as a background in my component called Home, that occupies the <strong>entire browser window</strong> ONLY in my Home component...
  Below shows the structure of my application:</p>
  
  <p><strong>index.html:</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
      &lt;html lang="en"&gt;
      &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;title&gt;MyAngularApp&lt;/title&gt;
        &lt;base href="/"&gt;
  
        &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
        &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;app-root&gt;&lt;/app-root&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p><strong>app.component.html:</strong></p>
  
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p><strong>app.component.ts:</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'app';
  }
  </code></pre>
  
  <p><strong>home.component.html:</strong></p>
  
  <pre><code>&lt;div class="background"&gt;
  &lt;p&gt;Example&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>home.component.css:</strong></p>
  
  <pre><code>.background {
      width: 100%;
      background: url('../../assets/background.jpg') no-repeat;
      background-size: cover;
      color: white;
      text-align: center;
  }
  </code></pre>
  
  <p>As you can see, what I need is that when rendering my home component, it shows as a background of my home component an image that occupies the entire browser window, the problem is that as I have tried ... the image does not take up the full screen of the browser, the image only occupies the background of the example sentence, and it is not responsive either.</p>
  
  <p>Many thanks!</p>