CSS equivalent to srcset (x-descriptors) for both iPhones and Android phones

Question

I have the following declaration in my html page.

<img src="images/banner_1000.jpg" width="500" srcset="images/banner_2000.jpg 2x, images/banner_3000.jpg 3x">

An x-descriptor with both 2x and 3x defined. I want to create a css equivalent so that I can place text on top of this image. Therefore I want to apply a background image to an element, let's just call it #showcase.

I found the following css that will load the image in the pixel ratio 2x.

@media 
  (-webkit-min-device-pixel-ratio: 2), 
  (min-resolution: 192dpi) { 
  #showcase {
    background-image: url(banner_2000.jpg);
  }
}

My question is what is the 3x version. Obviously device-pixel-ratio is 3, but what is the min-resolution?

Answer 1

The min-resolution value will be (96 * 3) = 288. Normally it is 96dpi for devices. But, in high resolution you have multiply 96 with the device-pixel-ratio value as for device-pixel-ratio value is 2, the min-resolution value will (96 * 2) = 192. For 3x, code will be following:

@media 
  (-webkit-min-device-pixel-ratio: 3), 
  (min-resolution: 288dpi) { 
  #showcase {
    background-image: url(banner_3000.jpg);
  }
}