Revision: 63930
Updated Code
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
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
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