Установка фона в Angular2 с инкапсуляцией, установленной как none

Question

Я пытаюсь установить изображение на фоне всей страницы следующим образом:

app.component.html

<div [ngStyle]="{'background-image': 'url(' + somePhoto + ')'}">
  <h1>
    Hello, world
  </h1>
</div>

app.component.ts (примечание: инкапсуляция не установлена)

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');
  }
}

app.component.css

body {
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
   background-attachment: fixed;
 }

Проблема в том, что при использовании [ngStyle] изображение покрывает только часть заголовка страницы.

Если вместо ngStyle я выберу тело напрямую с чем-то вроде:

 document.body.style.backgroundImage = 'url(someimage.jpg)';

Изображение охватывает всю страницу, что я и хочу, чтобы произошло. Но мне сказали, что выбор тела - плохая практика.

Как я могу получить [ngStyle] (или что-нибудь еще), чтобы создать фоновое изображение, которое охватывает всю страницу?

Спасибо

Answer 1

Вы можете накрыть тело элементом div вашего шаблона и заполнить его фоновым изображением, как показано в этом стеке:

app.component.html

<div class="outerDiv" [ngStyle]="{'background-image': 'url(' + somePhoto + ')'}">
    <div>
        <h1>
            Hello, world!
        </h1>
    </div>
</div>

app.component.css

.outerDiv {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;  
}

styles.css:

html,
body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

Примечание: я добавил внешний div для настройки overflow: hidden, Без этого атрибута стиля поле по умолчанию h1 элемент препятствовал тому, чтобы div заполнял верхнюю часть тела (по крайней мере, в Chrome на Windows).