Turn your svg image into a base64 and load the image data as content: "". Wouldn't that work?
Karl Sent from losPhone > On Aug 5, 2014, at 8:18 AM, Philippe Wittenbergh <e...@l-c-n.com> wrote: > > >> Le 5 août 2014 à 22:00, Tom Livingston <tom...@gmail.com> a écrit : >> >> was having a discussion in the comments of an article about using >> svg as a background-image in CSS, and using a png as fallback. I was >> writing it like this: >> >> background-image: image.png; >> background-image: image.svg; >> >> But this fails in IE8 (and presumably in other non-svg-supporting browsers). >> >> My thought was that it would work like background-color does. >> >> Sample page: >> http://tomliv.com/nick-test/ >> >> Just trying to learn here. Why does the cascade not work in both cases? > > The cascade doesn't work because the older browsers understand your syntax in > the second rule, but threat the image as an unsupported/invalid format. > > Solutions: > > option 1: use the full background shorthand from the css3 module for your SVG > image (con, anything older than Firefox 17, iirc, fails, falls back to the > PNG image). > > option 2: wrap your SVG rule in a MQ: @media screen and > (-webkit-min-device-pixel-ratio: 1),/* etc*/ { SVG stuff here } > > Modernizr has a decent detection, con it fails for Firefox 3.6 (no support > for SVG background, but supports SVG as <img> which is what moderniser tests). > > Philippe > -- > Philippe Wittenbergh > http://l-c-n.com/ > > > > > > ______________________________________________________________________ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
