CSS SVG background and fallback including background size and positioning

CSS-svg-with-fallback.css

/*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;
}