diff --git a/less/mixins.less b/less/mixins.less index 3207c82ec9..a5c02d5fd7 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -379,27 +379,20 @@ // RETINA IMAGE SUPPORT // -------------------------------------------------- -// Retina background image support with non-retina fall back -// Usage example can be found here: https://gist.github.com/dannykeane/4754113 -.retina-image(@file, @type, @repeat, @width, @height, @posx, @posy) { - background-image: url('@{file}.@{type}'); - background-repeat: @repeat; - background-position: @posx @posy; +// Short retina mixin for setting background-image and -size +.retina-image(@file-1x, @file-2x, @width-1x, @height-1x) { + background-image: url("@{file-1x}"); - @media print, - screen, - (-webkit-min-device-pixel-ratio: 1.25), - (~`"-o-min-device-pixel-ratio: 1.25/1"`), - (min--moz-device-pixel-ratio: 1.25), - (-moz-min-device-pixel-ratio: 1.25), - (-ms-min-device-pixel-ratio: 1.25), - (min-device-pixel-ratio: 1.25), - (min-resolution: 120dpi), - (min-resolution: 1.25dppx) { - background-size: @width @height; - background-image: url('@{file}@2x.@{type}'); - background-position: @posx * 2 @posy * 2; - } + @media + only screen and (-webkit-min-device-pixel-ratio: 2), + only screen and ( min--moz-device-pixel-ratio: 2), + only screen and ( -o-min-device-pixel-ratio: 2/1), + only screen and ( min-device-pixel-ratio: 2), + only screen and ( min-resolution: 192dpi), + only screen and ( min-resolution: 2dppx) { + background-image: url("@{file-2x}"); + background-size: @width-1x @height-1x; + } }