orioltf
2/26/2013 - 9:41 AM

#CSS #SCSS #SVG: SVG background with fallback + mixin Credit: http://germanforblack.com/post/43975575422/protip-all-browsers-that-support-s

#CSS #SCSS #SVG: SVG background with fallback + mixin Credit: http://germanforblack.com/post/43975575422/protip-all-browsers-that-support-svg-background-images

svg_bg_with_fallback.scss
content_copyfile_download
/* Credit: http://germanforblack.com/post/43975575422/protip-all-browsers-that-support-svg-background-images */

$public_path: ./;
 
@mixin vector-bg-with-fallback($name) {
	background-image: url('#{$public_path}images/#{$name}.png');
	background-image: none, url('#{$public_path}images/#{$name}.svg');
}
svg_bg_with_fallback.css
content_copyfile_download
/* Credit: http://germanforblack.com/post/43975575422/protip-all-browsers-that-support-svg-background-images */

.module {
	background: url('logo.png');
	background: none, url('logo.svg');
}