jQuery Plugin To Create Cross-container Background Image - Shared Background

File Size: 11.4 KB
Views Total: 496
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Create Cross-container Background Image - Shared Background

Shared Background is a lightweight fancy jQuery plugin that makes multiple containers share the same background image.

How to use it:

1. Just include the JavaScript file shared-background.jquery.min.js after jQuery library and the jQuery Shared Background is ready for use.

<script src="/path/to/jquery.min.js"></script>
<script src="shared-background.jquery.min.js"></script>

2. Create a group of containers and specify the background image using data-shared-background attribute as this:

<ul id="shared" data-shared-background="bg.jpg">
  <li class="panel">
    <p>A</p>
  </li>
  <li class="panel large">
    <p>B</p>
  </li>
  <li class="panel">
    <p>C</p>
  </li>
  <li class="panel">
    <p>D</p>
  </li>
  <li class="panel">
    <p>E</p>
  </li>
</ul>

3. You can also specify the image path in the JavaScript:

$('#shared').sharedBackground('bg.jpg');

This awesome jQuery plugin is developed by MyJobCompany. For more Advanced Usages, please check the demo page or visit the official website.