@mixin responsiveImage($filename, $ext:"png", $svg-fallback:"png", $size:"base"){
	background-image: image-url('#{$filename}.#{$ext}');
	
	//for IE 8 and below
	
	@if($ext == "svg"){
		.oldie &{
			background-image: image-url('#{$filename}.#{$svg-fallback}');
		}
	}@else{
	// if not svg, show regular media query

      @media
		(-webkit-min-device-pixel-ratio: 2),
		(   min--moz-device-pixel-ratio: 2),
		(     -o-min-device-pixel-ratio: 2/1),
		(        min-device-pixel-ratio: 2),
		(                min-resolution: 192dpi),
		(                min-resolution: 2dppx) { 
			background-image:image-url("#{$filename}@2x.#{$ext}");
			@if $size !="base"{
				background-size: image-width($filename + "." + $ext) image-height($filename + "." + $ext);
				}
			}	
	}
}

@mixin responsiveImage($filename, $size:"base", $ext:"png", $svg-fallback:"png"){
	background-image: image-url('#{$filename}.#{$ext}');
	
	//for IE 8 and below
	
	@if($ext == "svg"){
		.oldie &{
			background-image: image-url('#{$filename}.#{$svg-fallback}');
		}
	}@else{
	// if not svg, show regular media query

      @media
		(-webkit-min-device-pixel-ratio: 2),
		(   min--moz-device-pixel-ratio: 2),
		(     -o-min-device-pixel-ratio: 2/1),
		(        min-device-pixel-ratio: 2),
		(                min-resolution: 192dpi),
		(                min-resolution: 2dppx) { 
			background-image:image-url("#{$filename}@2x.#{$ext}");
			@if $size !="base"{
				background-size: image-width($filename + "." + $ext) image-height($filename + "." + $ext);
				}
			}	
	}
}

I got tire of writing the same lines of code for responsive background images, so here is my solution that I came up with for a project that I'm currently working on. This is version 1.0, version 1.1 is coming soon.

Responsive background image with SASS + Compass

SASS