Compass Mixin for Retina Image Support

@mixin image-2x($image, $width, $height) { @media (-moz-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 1.3dppx) { // on retina, use image that's scaled by 2 background-image: url($image); background-size: 100%; } } // CSS EXAMPLE background: url("PATH/TO/IMAGE/FILE.png") no-repeat; @include image-2x("PATH/TO/IMAGE/FILE@2x.png", 100px, 25px);

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.