Lightweight (only 2kb minified) vanilla JS plugin for loading dynamic background images. Useful for cases when the background source is set dynamically by back-end integration (e.g. CMS, Ajax calls, ...). Works out of the box with Bootstrap 3.x+.
##Demo
Coming soon
##Usage
Add the CSS somewhere in the head
The CSS is not required if you're using Bootstrap 3.x+
<link rel="stylesheet" href="css/main.css">Add the element with dynamic background images
The class and data attributes are required
<!--
The inline style element is not required but recommended as fallback
This (usually) should be the image with the lowest filesize
-->
<div
class="bg-responsive"
style="background-image:url(img/xs.jpg);"
data-xs="img/xs.jpg"
data-sm="img/sm.jpg"
data-md="img/md.jpg"
data-lg="img/lg.jpg">
</div>Add the JS at the end of the body. The script initializes automatically on load and adds a resize handler that sets the corresponding background-image on breakpoint change.
<script src="js/bg-responsive.js"></script>##Options
envs: ['xs', 'sm', 'md', 'lg'],
selector: '.bg-responsive',
interval: 250
Note: when changing the default environments, you'll also need to change the name of your data attributes accordingly
Example
ResponsiveBackgrounds.init({
envs: ['xs', 'xl']
});
Then the data attributes should be as following
<div class="bg-responsive" style="background-image:url(img/xs.jpg);" data-xs="img/xs.jpg" data-xl="img/xl.jpg"></div>
/*
* Manually initialize Responsive Background Images
* (!Note the script intializes automatically when loaded, use this when you need manual initialization)
*/
ResponsiveBackgrounds.init();
/*
* Manually add a resize handler that sets the corresponding background-image on breakpoint change
* (!This is executed on intialization, use this only when you need manual initialization)
*/
ResponsiveBackgrounds.addResizeEvent();
// Remove existing resize handler
ResponsiveBackgrounds.removeResizeEvent();
// Get current breakpoint
console.log(ResponsiveBackgrounds.currentBreakpoint());
// Watch for breakpoint changes / Return current env on resize
window.addEventListener('resize', function(){ console.log(ResponsiveBackgrounds.currentBreakpoint()); }, false);