CSS background image-set test

Edward O'Connor (Apple) proposed an addition to CSS4 called image-set. Safari 6 and Chrome 21 added support for the new image-set spec using the webkit- prefix. Read the blog post associated with this test.

The test

Test code

HTML


<div id="test">

</div>

CSS


#test {
        background-image: url(assets/no-image-set.png); 
        background-image: -webkit-image-set(url(assets/test.png) 1x,
               url(assets/test-hires.png) 2x);
        background-image: -moz-image-set(url(assets/test.png) 1x,
               url(assets/test-hires.png) 2x);
        background-image: -o-image-set(url(assets/test.png) 1x,
               url(assets/test-hires.png) 2x);
        background-image: -ms-image-set(url(assets/test.png) 1x,
               url(assets/test-hires.png) 2x);
        width:200px;
        height:75px;
    }

Test description

The above test will show similar images with different text. The image will say:

No image-set support — if you are in a browser that doesn’t support image-set, but does support background-image.
image-set supported — if your browser supports image-set and your browser has selected the 1x image source.
Retina image-set — if your browser supports image-set and your browser has selected the 2x image source.

If no image shows up, then your browser either doesn’t support background-image or I have a bug in my CSS. Let me know.