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

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

Reply with a tweet or leave a Webmention. Both will appear here.