NeXTSTEP Programming Mastermind

    picturefill-background

    1.0.3 • Public • Published

    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.

    Install

    npm i picturefill-background

    DownloadsWeekly Downloads

    51

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    11.2 kB

    Total Files

    7

    Last publish

    Collaborators

    • martinschneider01
    • jcoquet
    • agory
    • nbazille
    • valotvince
    • fdubost
    • flepretre
    • slashgear
    • the-smaug
    • clement-berard
    • oltodo