angulartypescriptangular-materialmat-dialog

Add background image to mat-dialog

I am trying to add a background image to a mat-dialog but it does not show at all. I've even tried using a panelClass but no success.

.custom-panel .mat-dialog-container {
    background-image: url("../../../../assets/images/alerts/error-bg.png") !important;
    background-repeat: no-repeat;

    .mat-dialog-title {
        font-family: $fnt-main;
    }
}

enter image description here

enter image description here

enter image description here

Solution

  • You will have to add .custom-panel class and its containing styles in the root styles.scss file