Responsive Background Image Delivery Using Vanilla JavaScript

Category: Image , Javascript | March 25, 2015
Author: webatvantage
Views Total: 2,466
Official Page: Go to website
Last Update: March 25, 2015
License: MIT

Preview:

Responsive Background Image Delivery Using Vanilla JavaScript

Description:

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});

You Might Be Interested In:


Leave a Reply