jQuery.backgroundCover

jQuery.backgroundCover.js

/*
 * jQuery.backgroundCover.js
 * --------------------------------------------------------
 * A polyfill for the background-size: cover CSS property.
 *
 * Copyright: David Street 2014
 */

(function($) {
	
	$.fn.backgroundCover = function() {

		this.each(function() {
			var $this = $(this)
				, re = /url\(["|']{0,1}(.+)["|']{0,1}\)/
				, reMatches = []
				, imgUrl = ''
				, img;

			reMatches = $this.css('backgroundImage').match(re);

			// Must have a background image
			if (reMatches.length == 0) return false;

			// create a new image with the background-image url
			imgUrl = reMatches[1];
			$img = $('<img src="' + imgUrl + '">');
			$img.css({
				position: 'absolute',
				top: 0,
				width: '100%'
			});

			$(this).children().css({
				position: 'relative'
			});

			$(this).css({
				overflowY: 'hidden',
				backgroundImage: 'none',
				position: 'relative'
			}).prepend($img);
		});

		return this;

	};


})(jQuery);