A .scss mixin that makes it easy to include a .png fallback for .svg background images when using Modernizr.

01-bg-img-path.scss

// ---------------------------------------------------------------------------------
// CSS Image Paths
// ---------------------------------------------------------------------------------
$bg-img-path:		'/path/to/images/'; // Base Path for BG Layout Images

02-svg-bkgd.scss

// ---------------------------------------------------------------------------------
// Modernizr SVG Fallback
// Inspired by https://forrst.com/posts/Sass_Compass_Mixin_for_SVG_Background_Image_Fall-dWn
// ---------------------------------------------------------------------------------
@mixin no-svg { .no-svg & { @content } }

@mixin svg-bkgd($filename, $pos-x: '0', $pos-y: '0', $repeat: 'no-repeat', $extension: '.png') {
	background: transparent url($bg-img-path + $filename + '.svg') $pos-x $pos-y $repeat;
	@include no-svg { background: transparent url($bg-img-path + $filename + $extension) $pos-x $pos-y $repeat; }
}

03-how-to-use.scss

// ---------------------------------------------------------------------------------
// How to Use
// ---------------------------------------------------------------------------------
@include svg-bkgd(filename, right, center, no-repeat);