Skip to content

Instantly share code, notes, and snippets.

@mike-zarandona

mike-zarandona/RetinaMixin.less

Created October 23, 2013 18:41
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 mike-zarandona/7124184 to your computer and use it in GitHub Desktop.
Save mike-zarandona/7124184 to your computer and use it in GitHub Desktop.
Download ZIP
Retina LESS Mixin. Makes it super easy to specify one background image to cover both standard and retina views.
Raw
RetinaMixin.less
.retina(@bg-image, @size: cover, @file-type: 'png'){
background-image: url('@{path}@{bg-image}.@{file-type}');
background-size: @size;
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
background-image: url('@{path}@{bg-image}@2x.@{file-type}');
background-size: @size;
}
}
@mike-zarandona
Copy link
Author

I've updated this mixin to include the @3x specification here: https://gist.github.com/mike-zarandona/6195b0d3e0550e31a176

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment