Skip to content

Instantly share code, notes, and snippets.

@matallo

matallo/responsive retina images

Last active December 11, 2015 00:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save matallo/4518134 to your computer and use it in GitHub Desktop.
Save matallo/4518134 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
responsive retina images
@mixin image-2x($image, $width, $height) {
@media (min--moz-device-pixel-ratio: 1.3),
(-o-min-device-pixel-ratio: 2.6/2),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
background-image: image-url($image);
background-size: $width $height;
}
}
.logo {
background: image-url("crisalix_logo.png") no-repeat 0 center;
@include image-2x("crisalix_logo@2x.png", 160px, 50px);
}
@matallo
Copy link
Author

matallo commented Jan 12, 2013

based on this http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss

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