Introduction
Overview
MultiBackground is a lightweight and flexible jQuery plugin for creation and manipulation of powerful and beautiful backgrounds. It supports various background types such as a solid color, gradient, image, pattern, video, google maps etc. Furthermore it allows some background types to react to events, such as scrolling, which results in various interesting effects like parallax. It is supported by most major browsers and mobile devices.
The background technique is straightforward & pretty simple and can be used for background for almost any type of content.
One of the best features is support for multiple background layers of different types (see the examples section).
The plugin is originally designed and written by www.tonybogdanov.com and has it's own GitHub page available here.
Browser compatibility
The plugin is supported by the latest versions of all major browsers. However, you are always encouraged to test it yourself before heavily relying on the plugin.
| Background type |  |
 |
 |
  |
 11 |
10 |
9 |
 |
|
 |
|---|---|---|---|---|---|---|---|---|---|---|
| Solid | ||||||||||
| Horizontal gradient | ||||||||||
| Vertical gradient | ||||||||||
| Diagonal gradient | ||||||||||
| Radial gradient | ||||||||||
| Image | ||||||||||
| Pattern | ||||||||||
| HTML5 video | ||||||||||
| YouTube video | ||||||||||
| Vimeo video | ||||||||||
| iFrame | ||||||||||
| Google map | ||||||||||
| Feature | |
|
|
|
11 |
10 |
9 |
|
|
|
| Slideshow |
Requirements
- jQuery 1.8.3 – The plugin was developed and tested on this version, but might also work on lower ones.
Installation
In order to use the plugin you need to include the plugin and all of it's requirements in the page you are going to use it. The plugin should be included after all requirements:
<script type="text/javascript" src="../plugin/requirements/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../plugin/jquery.multibackground.min.js"></script>Heads up!
A MouseWheel override feature was introduced in version 1.1.1, which will achieve much smoother animations and parallax effects while scrolling, but may also be incompatible with some third party plugins (especially scrolling ones). Check the documentation for more info.
The feature has been removed in version 1.1.6.
Changelog
-
1.1.8
- Fixed #10
-
1.1.7
- Added a much requested horizontal & vertical alignment feature to all movable types.
- Reworked the slideshow feature + better API.
- Changed the loading animation.
-
1.1.6
- Removed the mousewheeloverride feature.
-
1.1.5
- New loading animation.
- Element sizing for attachment "fixed" bug fix.
- Version bump to comply with WP version.
-
1.1.3
- Bug fixes and improvements.
-
1.1.1
- MouseWheel override feature for smoother animations.
- Various improvements and optimizations.
-
1.1
- Any MultiBackground element can be used as a slideshow (slider).
- All transition effects use GPU acceleration with jQuery fallback on unsupported browsers.
- loadedshowcallback is now transitionloaded.
- Further optimizations and tests.
-
1.0.4
- The confusing "offsetfactor" and "sizefactor" are now replaced by the simpler "parallaxspeed".
- Attachment performance optimizations.
- Improved overall performance (non-visible elements are now ignored).
- More unit testing.
-
1.0.3
- Improved docs, demos & more testing.
- Various bug fixes and improvements.
- Improved loadedshowcallback.
-
1.0.2
- Updated docs.
- Prepared for unit testing.
- Compatible with jQuery 1.8.3.
- Various bug fixes and improvements.
- Improvements for integration with an upcoming WordPress plugin.
-
1.0.1
- Fixed a typo & refactored gradient CSS.
-
1.0
- This is the initial release of the plugin.