CSS - Display Alternative Image When Original Not Supported

I'm building a website and I want to use the WebP format for my images. I know than not all browsers support it, so I want to display an alternative JPG image if WebP is not supported. I have a div with this class applied to it:

.my-class{
    background: linear-gradient(to right bottom, rgba(89, 167, 255, 0.5), rgba(0, 31, 62, 0.7)), url('../assets/images/image.webp');
}

I want to add something to this class that displays an alternative image.jpg if the website is used on a browser that doesn't support WebP. How can I achieve this (With pure CSS)?