I've set up a bit of CSS to detect whether the client's using a Retina or other HiDPI display, and display a different background-image
for various div
s based on that. Here's my syntax:
<!-- LoDPI and MedDPI displays -->
#div {
opacity:0.4;
position:absolute;
top:0px;
z-index:2;
width:1600px;
height:900px;
animation-name:ring;
animation-delay:0s;
animation-duration:1500ms;
animation-timing-function:cubic-bezier(0.225, 1.650, 0.000, 0.805);
animation-fill-mode:forwards;
background-image:url(/valid/path/to/regular/file);
}
<!-- For Retina and HiDPI displays -->
@media only screen and (min-device-pixel-ratio: 1.4) {
#div {
background-image:url(/valid/link/to/HiDPI/file);
background-position:center;
background-size:contain;
}
}
The problem is, when I try this out on my Retina MBP, whose pixel ratio is set to 1.5 ("acts like 1920x1200), displays the normal-res images rather than the high-res ones.
You don't have all your curly braces closed. Regardless, for better support matrix, substitute your media query with
@media only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
/*your rules*/
}