CSS only technique for high-res background images for retina display.

With the release of the new Retina Display MacBooks front-end developers have yet another reason to optimize their designs for high pixel density displays. Here is a simple technique that makes use of the media query "min-device-pixel-ratio" to replace the default background image with the hi-res one. We'll start with a simple div and an icon.

    #icon{
       width:50px;
       height:50px;
       background: url('../images/icon.png') centre no-repeat;
    }

And write the media query to replace the image.

  @media
  only screen and (-webkit-min-device-pixel-ratio : 2),
  only screen and (min-device-pixel-ratio : 2) {

    #icon{
       background-image: url('../images/icon-retina.png');
       -webkit-backgorund-size:50px 50px;
    }
  }

Yes, it's pretty simple! There are only two things you have to watch out for: 1- You need the background size property to be set and note that on the example I'm using only -webkit, ideally you'll have the CSS3 property declared as well. 2 - Some devices use a pixel density of 1.5 so you either want to have a set of images for them as well or change the media query to 1.5 Now if you're worried about the impact on performance because you're essentially loading images twice. There is a very good article on the subject here: http://timkadlec.com/2012/04/media-query-asset-downloading-results/ The good news is that newer browsers won't actually load the image twice when they encounter this technique. Bad news is that older browsers will, so if your target audience is using that configuration you might consider a javascript technique instead. Cheers! Érico Vinicius