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