Usage inside CSS

[hybridherbst]

When using vue, svelte, ... or other frameworks, often images are part of styles:

<style>
.rice-drum {
    background-image: url(../components/static/Rice_Drum.jpg?format=webp);
}
</style>

vite resolves and bundles these images properly, but it seems imagetools doesn't see them - they stay in the source format and are not transformed.

Is this expected?

[dsfx3d]

+1

[Abilovv599]

Has anyone found a solution to this problem?

[RaymondSalim]

@Abilov599
As a workaround;

1. Set parent container to display: relative;
2. Create the picture element inside parent container, and set display: absolute; left: 0; top: 0; height: 100%; width: 100%

[benmccann]

This would need support in Vite: vitejs/vite#14686

[benmccann]

I just learned about image-set in CSS which may be useful here as well

Other interesting info here: https://web.dev/articles/responsive-images#images_in_css

[nosovk]

https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set
It seems that it's pretty well adopted now https://caniuse.com/?search=image-set