Align horizontally element of table in html page - html

Question

I need my angular material and css table to be able to take the full width of my div, but it doesn't work.
Also in my header, I want the image to be in the background.
This is the stackblitz link of my work: https://stackblitz.com/github/lnquaidorsay/bibliofront or https://nbwiyjwnw.github.stackblitz.io/product
<div class="container">
<div fxFlex="60">
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="weight">
<th mat-header-cell *matHeaderCellDef> Weight </th>
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="symbol">
<th mat-header-cell *matHeaderCellDef> Symbol </th>
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]"></mat-paginator>
</div>
</div>
</div>
Any idea ?

Answer 1

The products table seems to already be 100% wide. I guess you finally fixed it.
About the header background, remove the image from within the mat-toolbar-row element and add this css code to mat-toolbar:
mat-toolbar {
background-image: url('<path/to/image>');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}