Such is life. Client X needs a landing page within the next 15 minutes. It’s a rather simple page with not a lot more than a full-screen background image. Now, how can I achieve that in the quickest and easiest way? Having evaluated a few alternatives I decide to go with Ben Plum’s newest jQuery plugin Wallpaper. This lets me do the job in less than ten minutes. Being able to change the image to a video background using the very same solution made my client smile with joy…

Wallpaper, Part of the Formstone Library

Wallpaper is a brand-new plugin crafted by Ben Plum, a front-end developer located in Hampden, Baltimore. Wallpaper is the latest addition to PLum’s component collection Formstone. Formstone now consists of 12 different jQuery plugins, all of them targeting different tasks. What all the plugins have in common is their focus on easy implementation and customization. All the parts of the Formstone collection are MIT licensed and can be used freely for private and commercial projects alike. Each plugin is maintained individually, none of which depends on one of the others. So, you are free to choose one or two of them without having to implement the whole bunch.

Formstone is developed following a mobile first approach. All of the components are fully responsive. Namespacing cares for keeping you out of trouble with your other scripts and styles. Formstone’s components are compiled using Grunt, come minified, are deployable via Bower and function in all modern browsers.

Adding a Wallpaper: Easy As ABC

This is how it goes. First we embed Wallpaper:

Then a function

$("#element").wallpaper({ source: "path/to/image.jpg" });

and a corresponding container get defined :

Now this container will be filled with the given image. A demo looks like this:

That’s it! Wasn’t that fast enough?

Adding video as background is similarly easy. You can decide to have the video run once, loop or start on hover. Parameters are added to the function. Callbacks allow for the execution of further functions. Wallpaper is documented well. It takes about five minutes to learn what there is to learn.

My client is happy. Me too…

Related Links