Wallpaper for jQuery Adds Image or Video Backgrounds to Any Website Easily

January 10th, 2014

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:

<link href="jquery.fs.wallpaper.css" rel="stylesheet" type="text/css" media="all" />
<script src="jquery.fs.wallpaper.min.js"></script>

Then a function

	source: "path/to/image.jpg"

and a corresponding container get defined :

<div id="element"></div>

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

Dieter Petereit is a veteran of the web with over 25 years of experience in the world of IT. As soon as Netscape became available he started to do what already at that time was called web design and has carried on ever since. Two decades ago he started writing for several online publications, some well, some lesser known. You can meet him over on Google+.

Tags: , , , ,

Sort by:   newest | oldest | most voted
2 years 3 months ago

Why use jQuery for a background image when you can just use CSS? (The video one makes sense though.)

Oisin Conolly
2 years 3 months ago

Nice find! the video feature will definitely come in handy for a nice quick implementation that looks more advanced than it really is :)

Doug Bradley
2 years 3 months ago

You mentioned having video as the background, I was wondering where the video is hosted for such an application and if it would severely affect load times… especially in the mobile environment. I’ve used a DivTag plugin for Weebly and it’s good but glitchy and the video is hosted on Vimeo… which goes against their use submission guidelines.

2 years 3 months ago

Full screen backgrounds is of the current trends in web design. We can thank faster internet connections compared to a few years back. Wallpaper just makes it so easy to imolement.

2 years 3 months ago

Very nice, but I can’t download any files. The pages doesn’t seem to work properly any more.