Background

Demo

Demos are largely unstyled to give developers a better idea of how the plugin can drop into a new or existing project.

<div class="background"></div>

$(".background").background({
    source: "http://example.com/image.jpg"
});

Using Background

Main

background.js
background.css

Dependencies

jQuery
core.js
transition.js

Basic

Create a new Background by passing the source image URL at initialization:

$(".target").background({
  source: "http://example.com/image.jpg"
});

<div class="target">
  ...
</div>

Note: You will need to push any content above the background elements by setting the z-index.

Responsive

Create a responsive-friendly Background by defining key/value pairs containing the min-width image URLs:

$(".target").background({
  source: {
    "0px": "http://example.com/image-small.jpg",
    "980px": "http://example.com/image-large.jpg"
  }
});

HTML5 Video

Create a video Background by defining proper browser-specific source video URLs, as well as a poster image URL:

$(".target").background({
  source: {
    poster: "http://example.com/poster.jpg",
    webm: "http://example.com/video.webm",
    mp4: "http://example.com/video.mp4",
    ogg: "http://example.com/video.ogv"
  }
});

Note: Mobile browsers do not allow videos to auto play due to bandwidth concerns. Background will not attempt to load videos on mobile devices, instead the poster image will be displayed.

Options

Set instance options by passing a valid object at initialization, or to the public defaults method. Custom options for a specific instance can also be set by attaching a data-background-options attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.

Events

Events are triggered on the target instance's element, unless otherwise stated.

Methods

Methods are publicly available to all active instances, unless otherwise stated.

load

Loads source media

$(".target").background("load", "path/to/image.jpg");

$(".target").background("load", { "0px": "path/to/image-small.jpg", "980px": "path/to/image-large.jpg" });

$(".target").background("load", { "poster": "path/to/image.jpg", "webm": "path/to/video.webm", "mp4": "path/to/video.mp4", "ogg": "path/to/video.ogv" });

Parameters

mute

Mutes target video

$(".target").background("mute");

pause

Pauses target video

$(".target").background("pause");

play

Plays target video

$(".target").background("play");

unload

Unloads current media

$(".target").background("unload");

unmute

Unmutes target video

$(".target").background("unmute");

CSS