CSS: Basic high resolution targeting

CSS: background.css

body {background-image: url('foo.png');}

/* DPR (device px ratio) of 2*/
@media screen and (-webkit-device-pixel-ratio: 2) {
    body {background-image: url('foo-hi-res.png')}
}

/*OR better DPI (dots/inch) */
@media screen and (resolution: 96dpi) {
    body {background-image: url('foo.png');}
}
@media screen and (min-resolution:192dpi) {
    body {background-image: url('foo-hi-res.png')}
}

/* OR another way DPPX (dots/px) */
@media screen and (min-resolution: 2dppx) {
    body {background-image: url('foo-hi-res.png')}
}

/* OR safest to cover legacy proprietary webkit */
@media screen and (min-resolution: 2ddpx), screen and (-webkit-device-pixel-ratio: 2) {
    body {background-image: url('foo-hi-res.png'); background-size: cover}
}