@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.