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.


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.