html - How to properly assign a .webp image background in CSS?

Question

In HTML I know how to use the picture tag to add image types like webp to it, to let the browser take what's best to use. If the browser does not support webp it will fallback on the jpg or png images also provided. This is very useful as different resolutions (3x, 2x and 1x) are taken in consideration depending on media width. I usually write something like this:

<picture>
    <source class="centro1" media="(min-width: 1700px)"
        srcset="/images/baba-4254_xlarge_3x.webp 3x,
                /images/baba-2836_xlarge_2x.webp 2x,
                /images/baba-1418_xlarge_1x.webp" />
    <source class="centro1" media="(min-width: 1000px)"
        srcset="/images/baba-3546_large_3x.webp 3x,
                /images/baba-2364_large_2x.webp 2x,
    <source class="centro1" media="(min-width: 500px)"
        srcset="/images/baba-1701_medium_3x.webp 3x,
                /images/baba-1134_medium_2x.webp 2x,
                /images/baba--567_medium_1x.webp" />
    <source class="centro1" media="(max-width: 499px)"
        srcset="/images/baba-918_small_3x.webp 3x,
                /images/baba-612_small_2x.webp 2x,
    <img class="centro1" src="/images/baba-1418_xlarge_1x.jpg" alt="xxx" title="yyy">
</picture>

My problem now is that I would like a similar solution (3x, 2x, 1x) but in CSS, for images used as backgrounds.

I managed to write this:

@media only screen and (min-width: 1025) {
    .no-webp .backgrounded {
        background: url(/images/tete-1920.jpg) no-repeat; background-position: top center; width: 100%; height: auto;}
}

@media only screen and (min-width: 1025px) {
        background: url(/images/tete-1920.webp) no-repeat; background-position: top center; width: 100%; height: auto;}
}

@media only screen and (max-width: 1024px) and (min-width: 769px) {
        background: url(/images/tete-1024.jpg) no-repeat; background-position: top center; width: 100%; height: auto;}
}

@media only screen and (max-width: 1024px) and (min-width: 769px) {
    .webp .backgrounded {
        background: url(/images/tete-1024.webp) no-repeat; background-position: top center; width: 100%; height: auto;}
}

@media only screen and (max-width: 768px) and (min-width: 481px) {
    .no-webp .backgrounded {
        background: url(/images/tete-768.jpg) no-repeat; background-position: top center; width: 100%; height: auto;}
}

@media only screen and (max-width: 768px) and (min-width: 481px) {
    .webp .backgrounded {
        background: url(/images/tete-768.webp) no-repeat; background-position: top center; width: 100%; height: auto;}
}

@media only screen and (max-width: 480px) {
    .no-webp .backgrounded {
        background: url(/images/tete-480.jpg) no-repeat; background-position: top center; width: auto; height: 100%;}
}

@media only screen and (max-width: 480px) {
    .webp .backgrounded {
        background: url(/images/tete-480.webp) no-repeat; background-position: top center; width: auto; height: 100%;}
}

which works in the sense of providing a .webp and a .jpg for each @media, but not in providing different .webp sizes for each @media depending on resolution, and a single .jpg fallback.

I would be very grateful for your advice.

Answer 1

等待大神答复