Skip to content

Instantly share code, notes, and snippets.

@dieppon
Last active August 29, 2015 14:01
Show Gist options
  • Save dieppon/832ad09bff037a86fa45 to your computer and use it in GitHub Desktop.
Save dieppon/832ad09bff037a86fa45 to your computer and use it in GitHub Desktop.
Adds support for @2x background images for retina displays.
// higher resolution images for high resolution displays
@mixin hires-graphic($hdfile, $hdtype, $hdwidth, $hdheight) {
$filename: $hdfile + '.' + $hdtype;
$hdfilename: $hdfile + '@2x.' + $hdtype;
background-image: url('../images/' + $filename);
@media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
background-image: url('../images/' + $hdfilename) !important;
-webkit-background-size: $hdwidth $hdheight;
background-size: $hdwidth $hdheight;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment