title: Using x2 image for Retina displayes CSS
body: <p>I am using this query to identify retina display:</p>
  
  <pre><code> for none retina displayes
   .logo {
         background-position: -242px -138px;
         width: 67px;
         height: 14px;
   }
  
   @media
   only screen and (-webkit-min-device-pixel-ratio: 2),
   only screen and ( min--moz-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) {
       .logo, arrow, ... {
         background: url(../img/sprites_2x.png) no-repeat;
       }
  
        .logo {
           background-position: -336px -20px;
           width: 134px;
           height: 28px;
        }
   }
  </code></pre>
  
  <p>Now this does not fix the problem, because images are not 2x the size. How to write my css so it uses the correct ratio and scale of images for retina displays.</p>