Skip to content

Instantly share code, notes, and snippets.

@jleiva
Created December 5, 2013 17:32
Show Gist options
  • Save jleiva/7809728 to your computer and use it in GitHub Desktop.
Save jleiva/7809728 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
// http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss
// Pruebo pasarle background-position
@mixin image-2x($image, $width, $height, $pos-right: 0, $pos-left: 0) {
@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) {
/* on retina, use image that's scaled by 2 */
background-image: url($image);
background-size: $width $height;
background-position: $pos-right $pos-left;
}
}
div {
background: red;
@include image-2x('test@2x.png', 290px, 290px, 10px, 12px);
}
div {
background: red;
}
@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) {
div {
/* on retina, use image that's scaled by 2 */
background-image: url("test@2x.png");
background-size: 290px 290px;
background-position: 10px 12px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment