-9o3oa
Last Updated: February 25, 2016
·
2.686K
· creativeaura
35723b008b82d543b0903c85c55b11f9

SVG with PNG fallback for IE8

All browsers that support SVG background images also supports multiple background images.

CSS

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

SASS

$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');
}

Sourec : Ben Schwarz.

Say Thanks
Respond

1 Response
Add your response

4415
9a363d8b3417a9b367977e6111eb6be2

Android 2.3 and below didn’t support SVG but did support multiple-background, this would probably reset the first PNG background-image definition to none.

over 1 year ago ·