title: Setting background in Angular2 with encapsulation set as none
body: <p>I'm trying to set an image to the background of an entire page the following way:</p>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;div [ngStyle]="{'background-image': 'url(' + somePhoto + ')'}"&gt;
    &lt;h1&gt;
      Hello, world
    &lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>app.component.ts (note: encapsulation set to none)</p>
  
  <pre><code>import { Component, ViewEncapsulation } from '@angular/core';
  import { OnInit } from '@angular/core/src/metadata/lifecycle_hooks';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None
  })
  export class AppComponent implements OnInit {
    constructor() { }
  
    ngOnInit(): void {
      console.log('hello, world');
    }
  }
  </code></pre>
  
  <p>app.component.css</p>
  
  <pre><code>body {
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center center;
     background-attachment: fixed;
   }
  </code></pre>
  
  <p>The problem is, when using [ngStyle] the image only covers the header portion of the page.</p>
  
  <p>If instead of ngStyle, I select the body directly with something like:</p>
  
  <pre><code> document.body.style.backgroundImage = 'url(someimage.jpg)';
  </code></pre>
  
  <p>The image covers the entire page, which is what I want to happen. But I've been told selecting the body directly is bad practice.</p>
  
  <p>How can I get [ngStyle] (or anything else) to create a background image that covers an entire page?</p>
  
  <p>Thanks</p>