Responsive background-image picturefill

Responsive images are all the rage these days with the advent of HTML5/CSS3 webapps. In order to improve the speed of our webapps on mobiles, we don”t want to be sending huge 500kb images to a tiny mobile browser and have them scaled down by our responsive @media queries.

That”s where picturefill comes to the rescue, a handy javascript library that requests images of appropriate sizes (bases on any media query you like).

This is fantastic for img tags but what about css background images? Well some nifty media queries come to the rescue.