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

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>