Как добавить прозрачное фоновое изображение на всю страницу в Angular?

Question

Я пытаюсь поместить фоновое изображение на всю страницу. Также фон должен покрывать таблицу данных материала. Каков наилучший способ сделать это? Фон также должен быть прозрачным, чтобы вы могли читать содержимое таблицы.

После кода добавления фонового изображения: HTML:

<div class="image">
  <mat-toolbar color="primary">
    <mat-toolbar-row>
      <img src="assets/{{img_source}}" alt="img_source" title="img_source" width="25%" height="100%"> // not important
    </mat-toolbar-row>
  </mat-toolbar>

  <app-coffee-information></app-coffee-information>
</div>

CSS:

.image {
  height: 45em;
  background-size: cover;
  width: auto;
  background-image: url('../assets/Unknown.jpg');
  background-position: 50% 50%;
}

При изменении высоты на: height: 100%; это выглядит так:

Answer 1

div с class = "modal" должен сделать трюк

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    opacity:.5;
    background-color:transparent;
    background-image: url('../assets/Unknown.jpg');
}

Answer 2

Проблема заключается в вашем CSS. изменить

.image{
height: 45rem
...
}

до

.image{
height: 100%
...
}