CODEWITHSUNDEEP
htmlcssblur
HeyLameRobin
HeyLameRobin

Reputation: 331

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!

Upvotes: 8

Views: 35864

Answers (3)

Arjun Sharma
Arjun Sharma

Reputation: 31

Check parent-level elements; backdrop filter does not work if the parent-level element has the animation property.

Upvotes: 3

node_modules
node_modules

Reputation: 4925

You could set a transparent background using RGBA instead of using opacity to have the blur effect on the background. Also note that you are using an invalid order of HTML code.

The order is as follow:

<html>
<head>
<!-- All meta tags -->
</head>
<body>
<!-- All your elements such as divs, navs etc.. -->
</body>
</html>

So if we take your code, you would have something like this:

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

! For the sake of demonstration, I added position: relative to the profile class, this ensures your name element stays inside of the box. Remove that line if you are planning to copy the code below or don't want to have this.

.profile {
  background: url(https://townofbeekmantown.com/wp-content/uploads/2019/06/2-dog.jpg);
  width: 250px;
  height: 250px;
  background-size: cover;
  background-position: 0px;
  position: relative;
}
.name {
  position: absolute;
  bottom: 0px;
  left: 0px;
  background-color: rgba(0,0,0,0.55);
  color: white;
  padding-top: 15px;
  padding-bottom: 15px;
  width: 100%;
  text-align: center;
  backdrop-filter: blur(15px); // should do the trick but not working??
}
 <div class="profile">
  <div class="name">Dog</div>
</div>

Upvotes: 2

Dai
Dai

Reputation: 155055

This works for me:

  • Change <body class="profile"> to something like <div class="profile">.
    • <body> is a special HTML element.
  • Remove opacity: 0.6. It makes the entire element translucent which isn't what you want.
  • Instead, change the background-color to rgba( 0, 0, 0, 0.6 ) - then the backdrop will be partially visible through this semitransparent background.
  • Also, I replaced width: 100% with right: 0; as width: 100% will be affected by box-sizing: which will trip you up as you work on the textual content of your HTML.
  • You also need to add position: relative; to .profile so that the .name's position: absolute works.

.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>

Upvotes: 19

Related Questions