Posted By

FrederickWeiss on 03/23/14


Tagged

SASS mixin retina


Versions (?)

Retina Images


 / Published in: CSS
 

  1. SASS ////////////////////////////////////////////
  2.  
  3. @mixin image-2x($image, $width, $height) {
  4. @media (min--moz-device-pixel-ratio: 1.3),
  5. (-o-min-device-pixel-ratio: 2.6/2),
  6. (-webkit-min-device-pixel-ratio: 1.3),
  7. (min-device-pixel-ratio: 1.3),
  8. (min-resolution: 1.3dppx) {
  9. /* on retina, use image that's scaled by 2 */
  10. background-image: url($image);
  11. background-size: $width $height;
  12. }
  13. }
  14.  
  15.  
  16.  
  17. USAGE ////////////////////////////////////////////
  18.  
  19. div.logo {
  20. background: url("logo.png") no-repeat;
  21. @include image-2x("logo2x.png", 100px, 25px);
  22. }

Report this snippet  

You need to login to post a comment.