How to add transparent background image over the whole page in Angular?

user_9010613 0
Viewed 5278

I'm trying to put the background image over the whole page. Also the background should cover the Material Data Table. What is the best way to do it? The background should also be transparent, so that you can read the content of the table.

Following the code of adding the background image: 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%;
}

enter image description here

When changing the height to: height: 100%; it looks like this:

enter image description here

angular background background-image css html
2 Answers

a div with class="modal" should make the trick

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

The problem lies in your CSS. change 

.image{
height: 45rem
...
}

to

.image{
height: 100%
...
}
user_84200680
Related