I need the background image to extend across the entire page, including covering the Material Data Table. The background should be transparent so that the content of the table remains readable. What is the most effective method to achieve this? Here is the code for 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%;
}
https://i.sstatic.net/WrZZi.jpg
When setting the height to: height: 100%;, it appears like this: