Usage inside CSS
hybridherbst opened this issue · comments
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?
+1
Has anyone found a solution to this problem?
@Abilov599
As a workaround;
- Set parent container to
display: relative;
- Create the
picture
element inside parent container, and setdisplay: absolute; left: 0; top: 0; height: 100%; width: 100%
This would need support in Vite: vitejs/vite#14686
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
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