.test-unchanged-properties { background-1: url("img/test.png"); background-2: url(my-img-print.png) top left no-repeat red; } .test-changed-properties { background-image-1: image-set( url(img/test.png) 1x ); background-image-2: image-set( url(img/test.png) 2x ); background-image-3: image-set( url(img/test.png) 1x, url(img/test-2x.png) 2x ); background-image-4: image-set( url(img/test.png) 1x, url(img/test-2x.png) 2x, url(my-img-print.png) 600dpi ); } .test-variables { background-image: image-set( url(img/test.png) 1x, var(--test-image-2x) 2x, var(--test-image-3x, url(img/test-var-fallback-3x.png)) 3x ); } .test-mixed-units { background-image-1: image-set( url(img/test.png) 1x, url(img/test-2dppx.png) 2dppx ); background-image-2: image-set( url(img/test.png) 1x, url(img/test-2dpcm.png) 20dpcm ); } .test-mixed-order { background-1: image-set( url(../images/bck@3x.png) 3x, url(../images/bck.png) 1x, url(../images/bck@2x.png) 2x ); background-2: image-set( url(../images/bck@2x.png) 2x, url(../images/bck@3x.png) 3x, url(../images/bck.png) 1x ); } .test-no-url { background-image-1: image-set( "img/test.png" 1x, "img/test-2x.png" 2x ); background-image-2: image-set( "img/test.png" 1x, "img/test-2x.png" 2x, "my-img-print.png" 600dpi ); } .test-webkit-prefix { background-image: -webkit-image-set( url(img/test.png) 1x, url(img/test-2x.png) 2x, url(my-img-print.png) 600dpi ); } @media (min-width: 1000px) { .test-within-mq-1 { background-image: image-set( url(img/test.png) 1x, url(img/test-2x.png) 2x, url(my-img-print.png) 600dpi ); } } @media (min-width: 768px) and (max-width: 1024px) { .test-within-mq-2 { background-image: image-set( url(img/test.png) 1x, url(img/test-2x.png) 2x, url(my-img-print.png) 600dpi ); } } .list-1 { background-image: linear-gradient(#4444, #8888), image-set(url(img.png) 1x, url(img@2x.png) 2x); } .list-2 { background-image: image-set(url(img-a.png) 1x, url(img-a@2x.png) 2x), image-set(url(img-b.png) 1x, url(img-b@2x.png) 2x); } .test-valid-data-url { background-image: image-set(url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==) 1x, url(img/test-2x.png) 2x); } .test-invalid-data-url { background-image: image-set(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==, url(img/test-2x.png) 2x); } to-clone { background:image-set( url(img/test.png) 1x, url(img/test-2x.png) 2x ); }