Jan 10 2014

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

Advertisement

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…

formstone-landing

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:

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

Then a function

1
2
3
$("#element").wallpaper({
	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:

formstone-wallpaper

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

About the Author

Dieter Petereit is Noupe's Editor-In-Chief and 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 webdesign and has carried on ever since. Almost a decade ago he started writing for several online publications, some well, some lesser known. Dieter is a heavy G-Plusser, so why not meet him over there?

Homepage

Comments and Discussions
  • Kyle, 10 January 2014

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

  • Oisin Conolly, 11 January 2014

    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, 11 January 2014

    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.

  • caleb, 12 January 2014

    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.

  • Bas, 30 January 2014

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

Leave a Reply

Comments are moderated - and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!

comments form
search form
 
image description image description