•Try•
Catch

Image Sets

One Line Image Sets with SASS

Image sets are an awesome new way to serve HD images to capable devices using the familiar CSS background-image property.

@mixin image-set($img1,$img2) {
	background-image:url('#{$img1}');
	background-image: -webkit-image-set(url('#{$img1}') 1x, url('#{$img2}') 2x);
	/* currently only supported in WebKit but hey, why not */
	background-image: -moz-image-set(url('#{$img1}') 1x, url('#{$img2}') 2x);
	background-image: -p-image-set(url('#{$img1}') 1x, url('#{$img2}') 2x);
	background-image: -ms-image-set(url('#{$img1}') 1x, url('#{$img2}') 2x);
	background-image: image-set(url('#{$img1}') 1x, url('#{$img2}') 2x);
}

Usage

You can use this to make using image-sets within SASS as easy as:

@include image-set('../img/bedge_grunge.png', '../img/bedge_grunge_@2X.png');

Download

Don't be sorry, download this mixin here.

Comments (0)


Add a Comment





Allowed tags: <b><i><br>Comment:


** NOT RESPONSIBLE FOR OVERLY-CRISP PIXELS **

modmore