If you already use WebP images for your HTML <img> tags and want to enable WebP for the CSS background as well, the proper way is to use multiple backgrounds is the CSS styling.

For example, you have an element with .png CSS background:

.minicart-wrapper .action.showcart.desktop .fa-shopping-cart:before {
    background: url(../images/icon-cart.png) no-repeat;
}

To switch it to the WebP, you need to convert PNG/JPG image to WebP image manualy using one of the free tools in the Internet. Save it in the same folder and use CSS like this:

.minicart-wrapper .action.showcart.desktop .fa-shopping-cart:before {
    background: url(../images/icon-cart.webp) no-repeat;
}
body.no-webp .minicart-wrapper .action.showcart.desktop .fa-shopping-cart:before {
    background: url(../images/icon-cart.png) no-repeat;
}

In this case, all browsers will get WebP images, except for ones that do not support WebP. They will load the .png image.

Note that if you use Magento 2 with Magento 2 WebP Image extension "no-webp" class will be added to the <body> element automatically and will be available for you out of the box.

In case you use some other platform or extension, then you need to integrate JavaScript (e.g. Modernizr), that can detect WebP in order to programmatically add no-webp class to your body tag.