.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: url(img/test.png); background-image-2: url(img/test.png); background-image-3: url(img/test.png); background-image-4: url(img/test.png); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .test-changed-properties { background-image-4: url(img/test-2x.png); } } @media (-webkit-min-device-pixel-ratio: 6.25), (min-resolution: 600dpi) { .test-changed-properties { background-image-4: url(my-img-print.png); } } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .test-changed-properties { background-image-3: url(img/test-2x.png); } } .test-variables { background-image: url(img/test.png); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .test-variables { background-image: var(--test-image-2x); } } @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) { .test-variables { background-image: var(--test-image-3x, url(img/test-var-fallback-3x.png)); } } .test-mixed-units { background-image-1: url(img/test.png); background-image-2: url(img/test-2dpcm.png); } @media (-webkit-min-device-pixel-ratio: 1), (min-resolution: 96dpi) { .test-mixed-units { background-image-2: url(img/test.png); } } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .test-mixed-units { background-image-1: url(img/test-2dppx.png); } } .test-mixed-order { background-1: url(../images/bck.png); background-2: url(../images/bck.png); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .test-mixed-order { background-2: url(../images/bck@2x.png); } } @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) { .test-mixed-order { background-2: url(../images/bck@3x.png); } } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .test-mixed-order { background-1: url(../images/bck@2x.png); } } @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) { .test-mixed-order { background-1: url(../images/bck@3x.png); } } .test-no-url { background-image-1: url("img/test.png"); background-image-2: url("img/test.png"); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .test-no-url { background-image-2: url("img/test-2x.png"); } } @media (-webkit-min-device-pixel-ratio: 6.25), (min-resolution: 600dpi) { .test-no-url { background-image-2: url("my-img-print.png"); } } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .test-no-url { background-image-1: url("img/test-2x.png"); } } .test-webkit-prefix { background-image: url(img/test.png); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .test-webkit-prefix { background-image: url(img/test-2x.png); } } @media (-webkit-min-device-pixel-ratio: 6.25), (min-resolution: 600dpi) { .test-webkit-prefix { background-image: url(my-img-print.png); } } @media (min-width: 1000px) { .test-within-mq-1 { background-image: url(img/test.png); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .test-within-mq-1 { background-image: url(img/test-2x.png); } } @media (-webkit-min-device-pixel-ratio: 6.25), (min-resolution: 600dpi) { .test-within-mq-1 { background-image: url(my-img-print.png); } } } @media (min-width: 768px) and (max-width: 1024px) { .test-within-mq-2 { background-image: url(img/test.png); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .test-within-mq-2 { background-image: url(img/test-2x.png); } } @media (-webkit-min-device-pixel-ratio: 6.25), (min-resolution: 600dpi) { .test-within-mq-2 { background-image: url(my-img-print.png); } } } .list-1 { background-image: linear-gradient(#4444, #8888), url(img.png); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .list-1 { background-image: linear-gradient(#4444, #8888), url(img@2x.png); } } .list-2 { background-image: url(img-a.png), url(img-b.png); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .list-2 { background-image: url(img-a@2x.png), url(img-b@2x.png); } } .test-valid-data-url { background-image: url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .test-valid-data-url { background-image: url(img/test-2x.png); } } .test-invalid-data-url { background-image: image-set(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==, url(img/test-2x.png) 2x); } to-clone { background:url(img/test.png); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { to-clone { background:url(img/test-2x.png); } }