Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
simple 2x images in LESS
// Sets a 1x and a 2x background-image on an element.
//
// Arguments:
// @path - a String path to the 1x version of the image. The 2x version of this
// image must exist in the same directory as the 1x and have "_2x" at
// the end of its filename.
// @size - the value for the background-size attribute (e.g. 10px 20px; 100%).
.bg-image(@path, @size) {
background-image: url(@path);
background-size: @size;
@media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx){
background-image: replace(@path, "\.([a-zA-Z]{3,4})$", "_2x.$1");
}
}
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.