angular 5 make picture fit on mat-toolbar with matmenu

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.

   htmlCopy code
   <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.

   cssCopy code
   .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.