Add background image to mat-dialog

Question

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;
    }
}

Answer 1

Assuming you have a component that is what you show inside mat-dialog, then you should add this background style to your css/scss like this:

:host {
    background-image: url("../../../../assets/images/alerts/error-bg.png") !important;
    background-repeat: no-repeat;
}

Read here a detailed explanation about style isolation.

Answer 2

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