Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Retina LESS Mixin v3 - now makes it super easy to specify one background image to cover three image sizes (@1x|@2x|@3x).
.retina3(@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;
}
@media only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (min--moz-device-pixel-ratio: 3),
only screen and (min-device-pixel-ratio: 3) {
background-image: url('@{path}@{bg-image}@3x.@{file-type}');
background-size: @size;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.