Skip to content

Instantly share code, notes, and snippets.

@toadkicker
Forked from dannykeane/output.css
Created October 30, 2013 06:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save toadkicker/7228016 to your computer and use it in GitHub Desktop.
Save toadkicker/7228016 to your computer and use it in GitHub Desktop.
#element{
background-image: url('/images/sprite.png');
background-repeat: no-repeat;
background-position: -3px 0;
}
@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) {
#element{
background-size: 100px auto;
background-image: url('/images/sprite@2x.png');
background-position: -20px 0;
}
}
.retina-image(@file, @type, @repeat, @width, @height, @posx, @posy) {
background-image: url('@{file}.@{type}');
background-repeat: @repeat;
background-position: @posx @posy;
@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;
}
}
//Example
#element{
.retina-image('/images/sprite','png', no-repeat, 100px, auto, -10px, 0);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment