title: How to set the background image only for a particular component in angular 6
body: <p>I have created new component called login,I have to set background image for the component(login.component.html),only for that component.I have tried many solutions provided in stack overflow.But the image is not setting to full height of the body.
  Below are my project files.</p>
  
  <p>index.html</p>
  
  <pre><code>   &lt;!doctype html&gt;
      &lt;html lang="en"&gt;
        &lt;head&gt;
          &lt;meta charset="utf-8"&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>app.component.html</p>
  
  <pre><code>    &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>   import { BrowserModule } from '@angular/platform-browser';
     import { NgModule } from '@angular/core';
     import { AppComponent } from './app.component';
     import { LoginComponent } from './login/login.component';
  
     @Component({
       AppComponent,
       LoginComponent
     })
     imports: [
       BrowserModule,
       RouterModule.forRoot([
         { path: '', pathMatch: 'full', redirectTo: 'login' },
         { path: 'login', component: LoginComponent },
  
             ])
  
            ],
          providers: [],
          bootstrap: [AppComponent]
               })
  
         export class AppModule { }
  </code></pre>
  
  <p>login.component.html</p>
  
  <pre><code>    &lt;div class="inventory-body"&gt;
          &lt;!--content goes here--&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>login.component.css</p>
  
  <pre><code>    .inventory-body {
      margin: 20px 0px;
      color: white;
      padding: 20px;
      height:auto;
      background-image: url('/assets/img/1.jpg');
       }
  </code></pre>
  
  <p>Here is the login.component.ts file</p>
  
  <pre><code>    import { Component, OnInit } from '@angular/core';
  
      @Component({
        selector: 'app-login',
        templateUrl: './login.component.html',
        styleUrls: ['./login.component.css']
       })
     export class LoginComponent implements OnInit {
  
      constructor() { }
  
      ngOnInit() {
  
        }
  
       }
  </code></pre>