Advanced Search

Return to Snippet

Revision: 63930
at June 29, 2013 04:48 by khoanguyen26
Updated Code 
@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);
				}
			}	
	}
}

Revision: 63929
at June 18, 2013 23:37 by khoanguyen26
Initial Code 
@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);
				}
			}	
	}
}
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
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.

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Responsive background image with SASS + Compass

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
SASS