Package Exports
- responsive-backgrounds
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (responsive-backgrounds) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
responsive-backgrounds
Lazy-load responsive backgrounds
Define different screen sizes for background images to be swapped out
Define your screen sizes with:
<div selector data-screen-0="images/small.jpg" data-screen-500="images/medium.jpg" data-screen-800="images/large.jpg"></div>- For window width 0px and up, images/small.jpg will be used.
- For window width 500px and up, images/medium.jpg will be used.
- For window width 800px and up, images/large.jpg will be used.
Initialize the javascript with:
new ResponsiveBackground(selector,options);Options defaults are:
options = {
lazy: true, // lazy-load image(s) on page load, and before transitioning between different sizes
transition: 0.5 // how long a background transition is (in seconds)
}