Css media queries based on dpi/ppi resolution

I m a newbie in the CSS and i would like to know if anyone can help me in finding css media queries that help me in showing background picture based on dpi/ppi rather than width and height because many devices have same height and width but different dpi.

I did find some online and got me lost! many of them were like 5 years ago, or do not work cross browsers.

I m sorry if this is considered a duplicate, please consider it an update.

so far i found those 2, but are on very old post: First code:

@media
only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (min-device-pixel-ratio: 1.3),
only screen and (min-resolution: 120dpi)
{
    /* Your code to swap higher DPI images */
}


second code:

@media (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-device-pixel-ratio: 2), (min-resolution: 2dppx) { 

/*Your code for high res screens here */ }