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:

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.