Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
PE to use SVG as CSS background image with fallback for IE8/7/6
/**
* PE to use SVG as CSS background image with fallback for IE8/7/6
*
* Using SVG as CSS background image to display
* resolution-independent logos or icons is pretty
* awesome but does completely fail on IE8/7/6
*
* The trick:
* All three IE versions don't support rgba color values.
* By defining a rgba background color together with the
* SVG background image for all modern browsers, IEs prior
* to IE 9 will automatically ignore that and switch to the
* first background definition, where you can add a fallback
* png with the same size for example.
*
* Tested in:
* Safari 5.1+
* Chrome 16
* Firefox 9+
* Opera 11.6+
* MobileSafari on iOS 5
* IE6, IE7, IE8, IE9
*
* General support for SVG backgrounds:
* http://caniuse.com/#feat=svg-css
*
* Known issues:
* - Does not work in Firefox < 4
* - Might not work on older versions of Android Browser
*
* Thoughts?
* Please reply on Twitter: @bastianallgeier
* Or comment on this gist on Github.
*
* Awesome mod by @jng5 to demonstrate the resizability:
* http://dabblet.com/gist/1564480
*
*/
body {
background: #fff;
}
.twitter-logo {
width: 200px;
height: 200px;
text-indent: -6000px;
background: url(http://cl.ly/D4xT/twitter_newbird_blue.png) no-repeat center center;
background: rgba(0,0,0,0) url(http://cl.ly/D4o5/twitter_newbird_blue.svg) no-repeat center center;
}
<!-- content to be placed inside <body>…</body> -->
<div class="twitter-logo">Twitter Birdy</div>
{"view":"split-vertical","prefixfree":"1","page":"css"}
@jacobleech

This comment has been minimized.

Copy link

@jacobleech jacobleech commented Mar 6, 2014

this is awesome. thanks for sharing!

@chhuang

This comment has been minimized.

Copy link

@chhuang chhuang commented Mar 19, 2014

With this, both images will be downloaded for all browsers even if only one of them is used?

@annez

This comment has been minimized.

Copy link

@annez annez commented Apr 22, 2014

I like your solution, very similar to the using of multiple backgrounds to ensure the right type is downloaded.

Unfortunately this fails miserably on Android 2.3 which is still a large proportion of many websites customer base. As of right now I cannot find a workaround or a good solution that supports Android 2.3 well enough. The Android market is just too fragmented to be confident enough to apply this and accept the fallback of nothing showing for them.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.