I have a subtle pattern as background image. One image for regular resolutions and one double the size for retina displays. i wanted to display the retina background image starting with a resolution of 1.5 . But no matter what i try either with 1.5 dppx or without:
body {
background: image-url('ttg.png') repeat top left;
@media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5), (-moz-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
background: image-url('[email protected]') repeat top left;
background-size: 476px 476px;
}
}
Chrome is throwing a recommendation at me in the console:
Consider using ‘dppx’ units instead of ‘dpi’, as in CSS ‘dpi’ means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual ‘dpi’ of a screen. In media query expression: (-webkit-min-device-pixel-ratio: 1.5), not all, (min-resolution: 144dpi)
No matter if i leave (min-resolution: 1.5dppx), in or cut it out. What is the reason for that behaviour? Safari isn’t showing anything similar. :/ Best regards Ralf
