Кроссбраузерная реализация background-size: cover

Поскольку разработчики браузеров особо не торопились с введением CSS3-свойства background-size, родилась куча хаков, которые более-менее перекрывают возможности css с помощью жаваскрипта. Все, кроме Chrome, обросли нестандартными свойствами: в Firefox -moz-background-size, в Safari -webkit-background-size, в Opera до 10.5 версии -o-background-size.

В итоге на данный момент даже IE9 поддерживает свойство, но затянувшийся переход к возможностям css3 и html5 не дают расслабиться, поэтому и мы будет использовать jQuery, чтобы сделать примерно следующее.

Добавляем на страницу изображение в тэге img:

<img src="/img/bg.png" id="bg" alt="" title="" />

Прописываем абсолютное позиционирование:

#bg { position: fixed; top: 0; left: 50%;}
.bgheight { height: 100%; }

И вешаем на загрузку и ресайз окна изменение размера с соблюдением пропорций:

$(window).load(function() {
		var theWindow        = $(window),
		    $bg              = $("#bg"),
		    aspectRatio      = $bg.width() / $bg.height();

		$bg.css('margin-left', (- $bg.width() / 2));

		function resizeBg() {
			$bg.height("100%");
			$bg.width($bg.height() * aspectRatio);
			$bg.css('margin-left', (- $bg.width() / 2));
		}
		theWindow.resize(function() {
			resizeBg();
		}).trigger("resize");
	});

Если необходимо, чтобы изображение масштабировалось на весь экран, выбираем способ отсюда.