Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS SVG background and fallback including background size and positioning
/*I've seen a bunch of these around the net (e.g. http://pauginer.com/post/36614680636/invisible-gradient-technique and https://css-tricks.com/a-complete-guide-to-svg-fallbacks/) but they all lacked dealing with positioning of allowed two images to show (the first example).*/
.thing {
/* Setting source, position, size and no-repeat as per https://developer.mozilla.org/en/docs/Web/CSS/background */
background: url("../images/Account.png") center left / 22px auto no-repeat;
/* If you understand linear-gradients you will understand SVG too */
background: linear-gradient(transparent, transparent), url("../images/Account.svg") center left / 22px auto no-repeat;
}
/*However, old Android doesn't like size values in the shorthand (source: http://caniuse.com/#search=background-image) so instead we need to do this:*/
/* Setting source, position and no-repeat as per https://developer.mozilla.org/en/docs/Web/CSS/background */
.thing-revised {
background: url("../images/Account.png") center left no-repeat;
/* If you understand linear-gradients you will understand SVG too */
background: linear-gradient(transparent, transparent), url("../images/Account.svg") center left no-repeat;
/* We can't set size in the shorthand (source: http://caniuse.com/#search=background-image) so ensure that the background-size comes after and separately */
background-size: 22px auto;
}
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.