picturefill-background

Picturefill-background

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..

Markup pattern and explanation

Mark up your responsive images like this.

<div class="picturefill-background">
    <span data-src="small.jpg"></span>
    <span data-src="medium.jpg" data-media="(min-width: 400px)"></span>
    <span data-src="large.jpg" data-media="(min-width: 640px)"></span>
    <span data-src="big.jpg" data-media="(min-width: 800px)"></span>
</div>

Default options

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";

Explained...

Notes on the markup above...

• The div[class="picturefill-background"] element is used to apply background-image attribute.
• The div[class="picturefill-background"] element can contain any number of div[data-source] elements.
• Each div[data-src] element must have a data-src attribute specifying the image path.
• Each 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).
• The matchMedia polyfill is required to support the 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.