将背景图像添加到 mat-dialog

Question

I am trying to add background-image to mat-dialog, by spending some time on mat-dialog docs I realised that I can use panelClass: 'my-class' , to customize mat-dialog appearance, here my-class end up getting applied to div having class cdk-overlay-pane in mat-dialog, something like this.

Then I added this css to put the background-image in the matt-dialog.

.my-class .mat-dialog-container {
  background: url("assets/illustrations/abc.svg") no-repeat;
  padding-bottom: 16px !important;
}

.my-class {
  // background: white !important;
  border-radius: 10px;
}

eventually mat-dialog ended up looking like this, having transparent background.

In order to solve this issue I ended up adding background: white; to my-class and then it looked like this.

Everything seems to work fine, but it is now bit-buggy as soon as I close the dialog a white background of the same size is theres for milliseconds and then it disappears.

Answer 1

I managed to solve the problem by changing the way I was doing it, sometimes it's easier to change the approach instead of trying to find the solution of situation that you are struck on.

what I did is as follows.

In the attached image div having class='content represents the content of the dialog-box, so it's basically a div that we place as a wrapper on the content we want to display in mat-dialog, in my case I named it content .

So I modified the .mat-dialog-container padding to 0, so that content div can take the full height and width , and then added background-image to content div.

.my-class .mat-dialog-container {
  padding: 0px !important;
}

Final outcome can be seen in the below-mentioned image.