Flexible & Responsive jQuery Background Image Plugin - Wallpaper

Wallpaper is a tiny jQuery plugin that has the ability to scale a background image to fill and fit a div container while resizing the browser. Good for responsive web & app designs that automatically resize the background images without quality loss.

Features:

• Responsive and flexible
• Supports fixed position background image
• Scales the images with smooth transitions
• Allows to set the options using data-* attributes
• Supports callback events and methods
• Supports all the modern browsers
• Easy and fast

Basic Usage:

1. Inlcude jQuery javascript library and jQuery Wallpaper plugin in the footer of your web page

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="jquery.bp.wallpaper.js"></script>

2. Include required jquery.bp.wallpaper.css stylesheet on the web page

<link href="jquery.bp.wallpaper.css" rel="stylesheet" type="text/css" media="all" />

3. Create the html. Using Html 5 data-* attributes to set the configurations. You can also set them in javascript

<div data-wallpaper-options='{"source":"nasa-bw-3.jpg","fixed":"true"}'>
</div>

4. Opitons

autoPlay: true, // Autoplay video
hoverPlay: false, // Play video on hover
loop: true, // Loop video
mute: true, // Mute video
onLoad: function() {}, // Function fired when image has loaded
onReady: function() {}, // Function fired when pluggin is ready
source: "", // Source image file
speed: 500 // Speed of image transition

Change logs:

v3.1.19 (2015-02-07)

• Adding an alt tag to the fallback image

v3.1.18 (2014-06-17)

• Fixing debounce issue with responding;

v3.1.17 (2014-06-01)

• Fixing bug with destroy method;

v3.1.16 (2014-05-24)

• Normalizing youtube loading;

v3.1.15 (2014-05-22)

• Normalizing youtube loading;

v3.1.14 (2014-05-21)

• Fixing issue with image transitions

v3.1.13 (2014-05-20)

• Fixing more Safari issues...

v3.1.12 (2014-05-15)

• Fixed issue with responsive images never being cleaned;

v3.1.11 (2014-04-22)

• Fixing safari issue - problem with 'pointer-events' property.

v3.1.10 (2014-04-18)

• Bugs fixed

v3.1.5 (2014-04-17)

• Fixing youtube regex bug;

v3.1.3 (2014-04-10)

• Adding responsive image background support!

v3.1.2 (2014-04-08)

• Fixing YouTube thumbnail issue;

v3.1.1 (2014-04-03)

• Media load first no longer fades;

v3.1.0 (2014-03-30)

• Fixing issues with timing and animation styles;

v3.0.10 (2014-03-27)

• Fixing issues with timing and animation styles;

v3.0.6 (2014-03-27)

• Adding mute option for videos

v3.0.6 (2014-03-21)

• Adding data check to destroy method;

v3.0.5 (2014-02-18)

• Fixing demo formatting;
• Modifying video support on mobile - now draws supplied poster;

v3.0.4 (2014-02-07)

• Fixing data checks;

v2.2.4 (2014-01-03)

• Removed 'fixed' option;

v2.1.3 (2013-12-23)

• Added html5 video support - Wallpaper with moving images!

v2.1.2 (2013-11-15)

• Adding loading class to target for styling control.

v2.1.1 (2013-11-6)

• Adding event if trying to load same image;

v2.0.3 (2013-10-15)

• Fixing Bower support.

v2.0.2 (2013-10-12)

• Fixing issue with naturalHeight / width; Name spacing events; Adding fade up on initial load;

---

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