Responsive Background Image Delivery – responsive-background-images.js

Category: Image , Javascript | May 18, 2017
Author: asilgag
Views Total: 195
Official Page: Go to website
Last Update: May 18, 2017
License: MIT

Preview:

Responsive Background Image Delivery – responsive-background-images.js

Description:

A small vanilla JavaScript library for smartly and dynamically loading proper background images depending on the current screen sizes.

How to use it:

Load the minified version of the responsive-background-images.js library at the bottom of the webpage.

<script src="responsive-background-images.min.js" defer></script>

Specify the image paths for different screen sizes.

<div
      data-background-image-srcset="
      http://placehold.it/450x350 450w, 
      http://placehold.it/850x450 850w, 
      http://placehold.it/1280x850 1280w, 
      http://placehold.it/1740x1250 1740w">
</div>