I recently found the need to create a utility that helps me to mask a series of elements with a background image that spans across them, so the the picture basically gets masked by the elements selected. I couldn’t find a sweet reusable solution out there, so I went ahead and created my own little jQuery mask plugin. Here’s the code:

$.fn.mask = function(u) {
	return $(this).each(function() {
		var p = $(this).position();
		this.style.background = 'url('+u+') -'+p.left+'px -'+p.top+'px';
	});
};

Here’s how to use it:

// grab all li's on the page and mask them with a certain image
$('li').mask('http://farm3.static.flickr.com/2075/2509376094_737cce37d4_o.jpg');

Most interestingly, this was the first actually useful plugin that was tweetable in it’s entirety: http://twitter.com/pbakaus/statuses/2492305298. Enjoy!