/ Published in: SASS
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
@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); } } } }