Sharing Background Across Multiple Elements – Multiple.js

Preview:

Description:

Multiple.js is a JavaScript library which allows to share background across multiple DIV elements using CSS. Works on any desktop browser that supports background-attachment: fixed and mobile browsers that supports position: fixed and clip: rect().

How to use it:

Add the Multiple.js and Multiple.css into your html file.

<link href="multiple.css" rel="stylesheet">
<script src="multiple.min.js"></script>

Assume that you have multiple div elements on the webpage.

<div class="item">Content</div>
<div class="item">Content</div>
<div class="item">Content</div>

Create a new Multiple object and specify the background image you want to use.

var multiple = new Multiple({
    selector: '.item',
    background: 'BACKGROUND IMAGE HERE'
});

var multiple = new Multiple({
    selector: '.item',
    background: 'BACKGROUND IMAGE HERE',
    affectText: 'black', // Specifies if background image should affect text instead of background.
    opacity: .2, //  gradient's opacity
});