Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Retina LESS Mixin. Makes it super easy to specify one background image to cover both standard and retina views.
.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

This comment has been minimized.

Copy link
Owner Author

@mike-zarandona mike-zarandona commented Dec 8, 2014

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