To make a picture fit on a mat-toolbar with a mat-menu in Angular 5, you can set the image as a background image of the mat-toolbar and adjust the background size and position using CSS. This will ensure that the picture fits correctly within the toolbar, even when a mat-menu is triggered. Here's how you can achieve it:

  1. HTML Template:

    In your component's template, use the mat-toolbar and mat-menu components. Also, add a <div> to hold the background image within the toolbar.

    <mat-toolbar color="primary"> <div class="background-image"></div> <span>App Title</span> <button mat-icon-button [matMenuTriggerFor]="menu"> <mat-icon>menu</mat-icon> </button> </mat-toolbar> <mat-menu #menu="matMenu"> <button mat-menu-item>Item 1</button> <button mat-menu-item>Item 2</button> </mat-menu>
  2. CSS Styles:

    In your component's CSS file, style the mat-toolbar and the background image within it.

    .mat-toolbar { position: relative; background-color: transparent; } .background-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('path/to/your/image.jpg'); background-size: cover; /* Adjust the background-size property as needed */ background-position: center; /* Adjust the background-position property as needed */ opacity: 0.5; /* Adjust the opacity to your preference */ }

    Replace 'path/to/your/image.jpg' with the path to your background image. Adjust the background-size and background-position properties to fit the image correctly within the toolbar. The opacity property is optional; you can adjust it to control the transparency of the image.

With these changes, the picture will fit within the mat-toolbar, and when the mat-menu is triggered, the image will remain in the background. The mat-menu will overlap the mat-toolbar, but the image will still be visible behind the menu.

Have questions or queries?
Get in Touch