Skip to content

Instantly share code, notes, and snippets.

@iansoper

iansoper/dabblet.css

Forked from bastianallgeier/dabblet.css
Created January 5, 2012 16:07
Show Gist options
  • Save iansoper/1565894 to your computer and use it in GitHub Desktop.
Save iansoper/1565894 to your computer and use it in GitHub Desktop.
Download ZIP
PE to use SVG as CSS background image with fallback for IE8/7/6
Raw
dabblet.css
/**
* 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;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="twitter-logo">Twitter Birdy</div>
Raw
settings.json
{"view":"split-vertical","prefixfree":"1","page":"css"}
@jacobleech
Copy link

this is awesome. thanks for sharing!

@chhuang
Copy link

chhuang commented Mar 19, 2014

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

@annez
Copy link

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