Skip to content

Instantly share code, notes, and snippets.

@jbrz0
Last active April 17, 2020 18:14
Show Gist options
  • Save jbrz0/5689c1891450cd820706f3698fc84d67 to your computer and use it in GitHub Desktop.
Save jbrz0/5689c1891450cd820706f3698fc84d67 to your computer and use it in GitHub Desktop.
Sass mixin for easy addition of retina images to CSS properties
@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: url($image);
background-size: $width $height;
}
}
//Usage
div.logo {
background: url("logo.png") no-repeat;
@include image-2x("logo2x.png", 100px, 25px);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment