Background Image Switcher with jQuery - ChangeBackground

File Size: 10.4 KB
Views Total: 1384
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>

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

<script src="//"></script>
<script src="jquery.changebackground.js"></script>

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


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.

  target: 'body'

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