0

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?

DaveK
  • 544
  • 1
  • 6
  • 16
  • Possible duplicate of [what exactly is device pixel ratio?](https://stackoverflow.com/questions/8785643/what-exactly-is-device-pixel-ratio) – Th3S4mur41 Nov 29 '18 at 09:43
  • I was asking specifically for the min-resolution on a device with pixel-ratio of 3, however I'm beginning to wonder if I really even need a min-resolution or not because DPI is dots per inch and I am not really worrying about printing logistics. I may just stick to the device-pixel-ratio and forget about min-resolution. My guess is the min-resolution is the same. – DaveK Nov 29 '18 at 14:34
  • 1
    right... in order to match your image tag, which doesn't take DPI into account, you only need the **min-device-pixel-ratio** in your media query. If you were using sizes in combination with your srcset in the tag. You would have added the same media query for the viewport for you background image too... See here: https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/ Btw. you have a width of 500(what?) on your tag. I suppose it is pixels, but you should add the unit. – Th3S4mur41 Nov 29 '18 at 15:07
  • Yep.. I should add that unit. Thanks for the info. ;) – DaveK Nov 30 '18 at 18:35

1 Answers1

0

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);
  }
}