carlos-sanchez
11/14/2013 - 3:01 AM

Retina background images. Note: The super weird min--moz-device-pixel-ratio is probably a bug, might wanna put in -moz-min-device-pixel-rat

Retina background images. Note: The super weird min--moz-device-pixel-ratio is probably a bug, might wanna put in -moz-min-device-pixel-ratio also in case they fix it but leave it prefixed.

retina-bg-images.css
content_copyfile_download
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2), /* Looks like a bug, so may want to add: */
only screen and (   -moz-min-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
    /* Your retina specific stuff here */
}

/* This one considers resolution too */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .hero {
    background-image: url('../img/hero-bg-2x.png');
  }
}