A Responsive Images approach like Picturefill but managing a picture on background-image css attribute.
Note: Picturefill-background works best in browsers that support CSS3 media queries..
Mark up your responsive images like this.
<div class="picturefill-background">
<span data-src="https://github.com/BedrockStreaming/picturefill-background/raw/master/small.jpg"></span>
<span data-src="https://github.com/BedrockStreaming/picturefill-background/raw/master/medium.jpg" data-media="(min-width: 400px)"></span>
<span data-src="https://github.com/BedrockStreaming/picturefill-background/raw/master/large.jpg" data-media="(min-width: 640px)"></span>
<span data-src="https://github.com/BedrockStreaming/picturefill-background/raw/master/big.jpg" data-media="(min-width: 800px)"></span>
</div>
w.picturefillBackgroundOptions = {
selector: "picturefill-background",
backgroundSize: "cover",
backgroundRepeat: "no-repeat",
backgroundPosition: "50% 50%"
};
Redefine this value to replace some of the options
picturefillBackgroundOptions.selector = "custom-selector";
Notes on the markup above...
div[class="picturefill-background"]
element is used to apply background-image
attribute.div[class="picturefill-background"]
element can contain any number of div[data-source]
elements.div[data-src]
element must have a data-src
attribute specifying the image path.div[data-src]
element can have an optional [data-media]
attribute to make it apply in specific media settings. Both media types and queries can be used, like a native media
attribute, but support for media queries depends on the browser (unsupported browsers fail silently).data-media
attribute in older browsers (e.g. IE9, Android 2.3 Browser). See http://caniuse.com/#feat=matchmedia for a table detailing native support for the matchMedia
API.