Responsive Background Image Delivery Using Vanilla JavaScript

bg-responsive.js is a vanilla JavaScript library that allows to intelligently load the appropriate background images based on the screen size you’re viewing on.

How to use it:

Load the bg-responsive.js JS library in your project.

<script src="js/bg-responsive.js"></script>

Add your background images with different resolutions into the container using data-* attributes.

<div class="bg-responsive" 
     data-xs="img/xs.jpg" 
     data-sm="img/sm.jpg" 
     data-md="img/md.jpg" 
     data-lg="img/lg.jpg">
</div>

Get the current breakpoint.

ResponsiveBackgrounds.init();

Watch for breakpoint changes.

ResponsiveBackgrounds.update({interval: 500});