htmlcssblur

Why isn't backdrop-filter: blur() working properly?

I'm trying to implement this image:

enter image description here

Where, a div with text "Dog" is partially covering and blurring the image. So I tried this:

   .profile {
      background-image: url(https://townofbeekmantown.com/wp-content/uploads/2019/06/2-dog.jpg);
      width: 250px;
      height: 250px;
      background-size: cover;
      background-position: 0px;
    }

    .name {
      position: absolute;
      bottom: 0px;
      left: 0px;
      background-color: black;
      color: white;
      padding-top: 15px;
      padding-bottom: 15px;
      width: 100%;
      opacity: 60%;
      backdrop-filter: blur(10px); // should do the trick but not working??
    }
<body class="profile">
    <div class="name">Dog</div>
</body>

enter image description here

As you can see, although the div has the right color/opacity, it is not blurring the part of the image it covers.

If backdrop-filter is applied on <div class="name"></div>, then shouldn't it take affect on the element behind it (which is <body class="profile">)? I'm confused as to what I am doing wrong. If anyone can point me in the right direction, I would greatly appreciate it. Thanks!

Solution

  • This works for me:

    .profile {
    width: 250px;
    height: 250px;
    position: relative;

    background-image: url("https://townofbeekmantown.com/wp-content/uploads/2019/06/2-dog.jpg");
   
    background-size: cover;
    background-position: 0px;
}

.name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    padding-top: 15px;
    padding-bottom: 15px;

    background: rgba( 0, 0, 0, 0.6 );
    backdrop-filter: blur(10px);

    color: white;

    text-align: center;
}
    <div>
    <div class="profile">
        <div class="name">Dog</div>
    </div>
</div>