Use WebP images on website [duplicate]

Question

This question already has answers here:

Detecting WebP support (21 answers)

Closed 8 years ago.

I want try to use images in WebP format as background images on my webpages. But I'm not sure, how make condition in CSS that if browser not support WebP format so in this case use classic jpg image. I find this example code, bud it doesn't work

.mybackgroundimage {
    background-image: url("image.jpg");
    background-image: image("image.webp" format('webp'), "image.jpg");
}

Answer 1

You must use modernizr to detect whether browser support webp or not and then apply appropriate style to it

.no-webp .mybackgroundimage 
{
background: url('image.jpg') no-repeat;

}

.webp .mybackgroundimage
{
background: url('image.webp') no-repeat;

}