Skip to content

Instantly share code, notes, and snippets.

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;

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:

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