image-set is now supported in Firefox 88, which is great news, however unlike other browsers it does not seem to work without setting background-size: cover;
To test this you'll need to be using Firefox 88 and have a high pixel density screen in order for image-set to use the high-res 2x background image, the image shown will display the text 'Retina image-set' if these are both true.
Run the below code snippet using Firefox 88, you'll notice that example 1 shows the whole image, while the second example, without background-size: cover, will show only part of the image which will appear stretched.
Now try again using an up-to-date webkit browser, you'll notice both examples show the image correctly.
I've been using image-set on webkit browsers for a few years now and it has always worked correctly without needing to set background-size. Am I doing something wrong? or is it a bug in FF 88?
Any help would be greatly appreciated :-)
#test {
background-image: url(https://cloudfour.com/examples/image-set/assets/no-image-set.png); /*Fallback for browsers that dont support image-set*/
background-image: -webkit-image-set(url(https://cloudfour.com/examples/image-set/assets/test.png) 1x,url(https://cloudfour.com/examples/image-set/assets/test-hires.png) 2x);/*-webkit- prefix for webkit browsers*/
background-image: image-set(url(https://cloudfour.com/examples/image-set/assets/test.png) 1x,url(https://cloudfour.com/examples/image-set/assets/test-hires.png) 2x);/*Unprefixed image-set, which is now supported in Firefox 88*/
width:200px;
height:75px;
}
.add_cover { background-size: cover; }Example 1 - With background-size: cover:
<div id="test" class="add_cover"></div>
Example 2 - Without background-size: cover:
<div id="test"></div>Turns out this is a bug in Firefox 88, which has been fixed in Firefox 89, due to be released early June 2021
FF Bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=1705877