JavaScript Plugin For Smooth Responsive Background Images – Backwall

Preview:

Description:

Backwall is a pure JavaScript library for responsive image solution that checkes the screen width and loads in the correct background image to reduce network traffic and increase page load speed.

Key features:

• Detect browser support for background-size: cover using Modernizr and provide an appropriate fallback, e.g. a solid color background
• Detect the user’s screen size and pixel ratio, and serve up a medium- or high-resolution background image
• For users with slow connections, serve up a low-resolution background image while the higher-resolution image loads
• Smoothly fade in background images when fully loaded using CSS3 transitions when the browser supports them

Basic usage:

Load the needed modernizr.js and the backwall.js in the html document.

<script src="modernizr-custom.js"></script>
<script src="backwall.standalone.min.js"></script>

Add a background image to your container that will act as the fallback background.

.container {
  background-image: url(bg.jpg);
  background-color: black;
}

Initialize the Backwall and specify the image paths for different screen resolutions.

new Backwall({
    imgLoRes: "bg-small.jpg", 
    imgMidRes: "bg-medium.jpg",
    imgHiRes: "bg-full.jpg"
});

More configuration options.

// The cutoff point at which backwall decides to load imgMidRes or imgHiRes
hiResThreshPx: 1080,
// The cross-fade transition time from 0% to 100% opacity when each image loads. 
// Will effectively be 0 on browsers that do not support CSS3 transitions.
fadeTimeSecs: 0.5