webinista / media-queries-svg-background-size

An example of using media queries in SVG with the CSS background size property

media-queries-svg-background-size

An example of using media queries in SVG with the CSS background size property.

Browser requirements

Your browser must support:

• Scalable Vector Graphics
• SVG in background images
• Media queries in SVG documents
• CSS background-size property

Your browser must also support all of the above features working together. It also helps if your browser has solid UI support for <input type="range">.

As of publication (7 April 2013 if you're wondering) Chrome is the only browser in which this demo works as intended. Other browsers DO, however, support media queries in SVG (except for Internet Explorer 10), and the background-size property.