A simple SASS mixin and function for retina background images. Assumes files are named according to Apple's @2x convention (e.g. image.jpg, [email protected]).

easy-retina-background-image.scss

@mixin background-image-retina($url) {
	background-image: url($url);
	@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
		background-image: url( str-replace($url, '.', '@2x.') );
	}
}

@function str-replace($string, $search, $replace: '') {
	// By Hugo Giraudel: http://www.sassmeister.com/gist/1b4f2da5527830088e4d
	$index: str-index($string, $search);

	@if $index {
		@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
	}

	@return $string;
}

// Usage
.class {
	@include background-image-retina('/source/file.jpg');
}