cssangularangular-materialbackground-imagemat-card

How set blurred background image for mat-card

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

Solution

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