Advanced Search

Responsive background image with SASS + Compass

/ Published in: SASS
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. @mixin responsiveImage($filename, $ext:"png", $svg-fallback:"png", $size:"base"){
  2. 	background-image: image-url('#{$filename}.#{$ext}');
  3.  
  4. 	//for IE 8 and below
  5.  
  6. 	@if($ext == "svg"){
  7. 		.oldie &{
  8. 			background-image: image-url('#{$filename}.#{$svg-fallback}');
  9. 		}
  10. 	}@else{
  11. 	// if not svg, show regular media query
  12.  
  13.       @media
  14. 		(-webkit-min-device-pixel-ratio: 2),
  15. 		(   min--moz-device-pixel-ratio: 2),
  16. 		(     -o-min-device-pixel-ratio: 2/1),
  17. 		(        min-device-pixel-ratio: 2),
  18. 		(                min-resolution: 192dpi),
  19. 		(                min-resolution: 2dppx) { 
  20. 			background-image:image-url("#{$filename}@2x.#{$ext}");
  21. 			@if $size !="base"{
  22. 				background-size: image-width($filename + "." + $ext) image-height($filename + "." + $ext);
  23. 				}
  24. 			}	
  25. 	}
  26. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.