SVG background images with PNG and retina fallback

svgBackgroundFallback.scss

$image-path: '../img' !default;
$fallback-extension: 'png' !default;
$retina-suffix: '@2x';
@mixin background-image($name, $size:false){
    background-image: url(#{$image-path}/#{$name}.svg);
    @if($size){
        background-size: $size;
    }
    .no-svg &{
        background-image: url(#{$image-path}/#{$name}.#{$fallback-extension});

        @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
          background-image: url(#{$image-path}/#{$name}#{$retina-suffix}.#{$fallback-extension});
        }
    }
}

• Modernizr Dependent
• .svg file, that will serve as the default background image.
• regular .png that serves as a fallback for non-svg-supporting browsers.
• twice as large .png as a second fallback to retina screens.

pattern.svg
pattern.png
pattern@2x.png

Usage

body {
  @include background-image('pattern');
}