My .webp image doesn't display as background image

This is the first time I've encountered this problem. It has worked for me before.

I've checked the URL path and it is correct. Do anyone see something I've missed that will end this suffering? :)

BTW! It worked when I implented the image as an <img> tag, but I don't wanna use that

HTML and CSS-code:

.works-block {
    display: flex;
    flex-wrap: wrap;
}

/* .works-block img {
    filter: grayscale(80%);
    max-width: 100%;
} */

.block-tandoori{
    background-image: url("Images/tandoori.webp");
}

.works-img {
    filter: grayscale(80%);
}

<section class="works-section">
  <div class="works-div-left works-block">
    <div class="block-tandoori works-img"></div>
    <!-- <img src="Images/tandoori.webp" alt="Image of foods from Tandoori Mix"> -->
    <h1 class="works-title">️ Tandoori Mix Ørsta</h1>
  </div>
</section>

My .webp image doesn't display as background image

0 Answers