How set blurred background image for mat-card

Question

I have mat-card with dynamic background image and i need blur this image

<mat-card [ngStyle]='{backgroundImage: backgroundImage}'>
  <mat-card-title>My card</mat-card-title>
  <mat-card-content>Card Content</mat-card-content>
</mat-card>

my css

mat-card {
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100% 100%;
  /* this blure all card */
  filter: blur(8px);
  -webkit-filter: blur(8px);
}

What I have: example what i have What I need: example what i need This is what I got as a result of adding this code:

mat-card:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.2;
    background-image: url('img url');
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: 100% 100%;
    filter: blur(10px);
    -webkit-filter: blur(10px);
  }

But this method does not suit me because pseudo elements are not part of DOM tree, and because of that do not expose any DOM API that can be used to interact with them

score 1 · Accepted Answer · answered Dec 15 '21 at 05:41

You can set the initial background image via a CSS variable and then change its URL dynamically.

But this method does not suit me because pseudo elements are not part of DOM tree, and because of that do not expose any DOM API that can be used to interact with them

-Yes, we cannot modify pseudo-elements because they are not part of the DOM tree. But we can change the CSS variables and pseudo-elements can refer to them.

A simple example:

Set a CSS variable in your styles:

:host {
  --myCssVar: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
}

Refer to this variable in ::before :

mat-card::before {
  content: " ";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.2;
  background-image: var(--myCssVar); //Use reference
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100% 100%;
  filter: blur(10px);
  -webkit-filter: blur(10px);
}

HTML:

<mat-card>
  <mat-card-title>My card</mat-card-title>
  <mat-card-content>Card Content</mat-card-content>
</mat-card>

Now, you can access this CSS variable & modify it dynamically (Constructor Example):

constructor(private elementRef: ElementRef) {
    setTimeout(() => {
      let host = elementRef.nativeElement;
      console.log(getComputedStyle(host).getPropertyValue('--myCssVar')); //Prints initial value
      host.style.setProperty(
        '--myCssVar',
        "url('https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg')"
      );
    }, 4000);
  }

We are accessing the host element with ElementRef dependency injection.
Then, we grab the nativeElement & access the CSS variables set over it
Finally, we use host.style.setProperty() to modify a CSS variable on the host element

@NiNjA_CaT If it solves your problem, can you please mark it as answer for others to follow — Pankaj Sati, Dec 15 '21 at 17:24

How set blurred background image for mat-card

1 Answers1