Полное фоновое изображение с меню angular материал

Question

Этот пример не работает, как применить это изображение для полноэкранного фона? Для работы фонового изображения блока контента!, Я не могу применить назад изображение для навигации

.menu-spacer {
  flex: 1 1 auto;

}

.bg{
  width: 100%;
  height: 100%;
  background: url('https://images.unsplash.com/photo-1497091071254-cc9b2ba7c48a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80') no-repeat center;
  background-size: 100% 100%;
  background-position: top center;
  background-repeat: no-repeat;
}

<div style="height: 80vh" class="bg" >
  <mat-toolbar  >
    <mat-toolbar-row>
      <button mat-icon-button (click)="sidenav.toggle()" fxShow="true" fxHide.gt-sm>
        <i class="material-icons">
          pets
        </i>

      </button>
      <span class="menu-spacer"></span>
      <div fxShow="true" fxHide.lt-md >
        <!-- The following menu items will be hidden on both SM and XS screen sizes -->

      </div>
    </mat-toolbar-row >
  </mat-toolbar>
  <mat-sidenav-container fxFlexFill >
    <mat-sidenav #sidenav >
      <mat-nav-list>

      </mat-nav-list>
    </mat-sidenav>
  </mat-sidenav-container>

</div>

Answer 1

Надеюсь, это поможет вам. Пожалуйста, измените соответственно.

.bg{
  width: 100%;
  height: 100%;
  background: url('https://images.unsplash.com/photo-1497091071254-cc9b2ba7c48a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80') no-repeat center;
  background-size: cover;
}

Answer 2

Если я получу то, что вы хотите, вам нужно добавить стиль в класс .mat-toolbar, чтобы он заработал.

.mat-toolbar {
  background: url('https://images.unsplash.com/photo-1497091071254-cc9b2ba7c48a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80') no-repeat center;
  background-size: cover;
  color: #fff;
}

См. Этот пример StackBlitz .

Он даже работает a с многорядной панелью инструментов .