如何在Angular Material应用程序的div元素中设置背景图像？

Question

I know this has been asked, but none of the solutions work. I have following html and I can get the image displayed if I use the commented img-element

<img src="assets/utgmap.jpg">

and comment away the following div-element. However I would like to have background image for the div instead and it's not working. CSS definition is in the end of the file and there's no 404 error for the image so it can be fetched but is is not displayed.

HTML:

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true"
  [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
  [mode]="(isHandset$ | async) ? 'over' : 'side'"
  [opened]="!(isHandset$ | async)">
  <mat-toolbar>Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">Link 1</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</a>
    </mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
  <mat-toolbar color="primary">
    <mat-toolbar-row>
      <button mat-icon-button (click)="toggleSidenav.emit()">
        <mat-icon>menu</mat-icon>
      </button>
      <span>webgisproto</span>
      <button mat-icon-button>
        <mat-icon>settings</mat-icon>
      </button>
      <button mat-icon-button>
        <mat-icon>help_outline</mat-icon>
      </button>
      <button mat-icon-button [matMenuTriggerFor]="menu">
        <mat-icon>exit_to_app</mat-icon>
      </button>
      <mat-menu #menu="matMenu">
          <button mat-menu-item (click)="logout()">
            <mat-icon>exit_to_app</mat-icon>
            <span>Sign out</span>
          </button>
      </mat-menu>
    </mat-toolbar-row>
  </mat-toolbar>
  <app-menu></app-menu>
  <!-- THIS WORKS!!
  <img src="assets/utgmap.jpg">
  IF I UNCOMMENT THIS AND COMMENT OUT THE FOLLOWING DIV -->
  <div class="bgimg">
    <div class="testclass"> 
        <mat-list color="primary">
          <mat-list-item> 
              <button mat-icon-button>
                  <mat-icon>settings</mat-icon>
                </button>
          </mat-list-item>
          <mat-list-item>
              <button mat-icon-button>
                  <mat-icon>help_outline</mat-icon>
                </button>
          </mat-list-item>
        </mat-list>
      </div>
    </div>
 </mat-sidenav-content>

CSS:

.testclass {
   float: right;
}

.bgimg {
    background: url('../../assets/utgmap.jpg') no-repeat center center fixed;
 }

If I change the path above there will be error.

Answer 1

You need to set a dimension to your div. The following code will display the image in full screen.

html, body {
  height: 100%;
}

.bgimg {
  display:block;
  width:100%;
  height:100%;
  background: url('../../assets/utgmap.jpg') no-repeat center center fixed;
}