20 lines
1.0 KiB
SCSS
20 lines
1.0 KiB
SCSS
// Assumes that image filenames follow the pattern:
|
|
// - 1x: name.png
|
|
// - 2x: name@2x.png
|
|
// - 3x: name@3x.png
|
|
@mixin retina-background-image($img-path, $ext: '.png') {
|
|
// Non-retina device
|
|
background-image: url($img-path + $ext);
|
|
background-size: 100%;
|
|
|
|
// Retina @2x device
|
|
@media only screen and (-webkit-min-device-pixel-ratio: 1.2), only screen and (min--moz-device-pixel-ratio: 1.2), only screen and (-o-min-device-pixel-ratio: 5/4), only screen and (min-device-pixel-ratio: 1.2), only screen and (min-resolution: 120dpi), only screen and (min-resolution: 1.2dppx) {
|
|
background-image: url($img-path + '@2x' + $ext);
|
|
}
|
|
|
|
// Retina @3x device
|
|
@media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min--moz-device-pixel-ratio: 3), only screen and (-o-min-device-pixel-ratio: 3/1), only screen and (min-device-pixel-ratio: 3), only screen and (min-resolution: 288dpi), only screen and (min-resolution: 3dppx) {
|
|
background-image: url($img-path + '@3x' + $ext);
|
|
}
|
|
}
|