svg background image scss mixin

svg_background_image_mixing.scss

/**
 * svg-background-image
 *
 * apply svg/png background-image pattern for IE8 and Android <2.3 support
 * uses `linear-gradient` method demostrated here
 * https://css-tricks.com/svg-fallbacks/#the-fallbacks
 */

@mixin svg-background-image($image-path: '/', $image-name, $fallback-file-extension: 'png', $repeat: no-repeat) {
    background-image: image-url("#{image-path}#{$image-name}.#{$fallback-file-extension}");
    background-image: linear-gradient(transparent, transparent), image-url("#{image-path}#{$image-name}.svg"); // scss-lint:disable DuplicateProperty
    background-repeat: $repeat;
    @content;
}