Skip to content

Instantly share code, notes, and snippets.

@gavinblair
Forked from rvr/2x-mixin.scss
Created July 30, 2014 14:10
Show Gist options
  • Save gavinblair/22e4fa6619506fb50d50 to your computer and use it in GitHub Desktop.
Save gavinblair/22e4fa6619506fb50d50 to your computer and use it in GitHub Desktop.
div {
@include image-2x("logo.png", "logo2x.png");
}
@mixin image-2x($image1, $image2) {
background-image: url($image);
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
background-image: url($image2);
background-size: image-width($image1) image-height($image1);
}
}
@SeanJA
Copy link

SeanJA commented Jul 30, 2014

div {
  .image-2x("logo.png", "logo2x.png");
}

// http://css-tricks.com/snippets/css/retina-display-media-query/
.image-2x(@image1, @image2, @img1-width: 50%, @img1-height: 50%) {
  background-image: url(@image);
  @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) {  
    background-image: url(@image2);
    background-size: @img1-width @img1-height;
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment