Background Image Switcher with jQuery - ChangeBackground

ChangeBackground is a super tiny (<1kb) jQuery plugin that allows the user to switch the background images of your webpage and saves the user's choice using Html5 localStorage API.

How to use it:

1. Create a regular select list and insert a list of background images as options using data-image attribute.

<select id="demo">
  <option value="Background-1" data-image="1.jpg">Background-1</option>
  <option value="Background-2" data-image="2.jpg">Background-2</option>
  <option value="Background-3" data-image="3.jpg">Background-3</option>
  <option value="Background-4" data-image="4.jpg">Background-4</option>
</select>

2. Load the latest jQuery library and the jQuery ChangeBackground plugin at the bottom of the webpage.

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="jquery.changebackground.js"></script>

3. Call the plugin on the select list and done.

$('#demo').changeBackground();

4. By default the plugin allows you to change the background images of the whole page (body). You can config the plugin to change the background images of a specific element using target option.

$('#demo').changeBackground({
  target: 'body'
});

---

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