画面いっぱいに画像を表示する

画像比率を保持+上下左右中央になるようにして、画面いっぱいに画像を表示するサンプルです。

サンプルコード

HTML

<div id="background"><img src="image.jpg" width="1200" height="900" alt="" /></div>

CSS

#background {
	position: fixed;
	left: 0; 
	top: 0;
	width: auto; 
	min-width: 100%; 
	height: auto;
	min-height: 100%;
	z-index: -1;
}
#background img {
	position: relative;
	width: 100%;
	height: auto;
}

#backgroundを画面いっぱいに表示して、子要素のimgは幅100%になるようにしています。
これだけだと画面比率によっては画面下に隙間ができたりするので、JavaScriptでサイズや位置を調整します。

JavaScript

$(function() {
	// 対象の画像
	var bgImg = $('#background img');
	// 画像の縦横サイズ
	var bgWidth = 1200;
	var bgHeight = 900;

	// 画像のサイズ調整
	function adjust() {
		// 画面サイズの取得
		var winWidth = $(window).width();
		var winHeight = $(window).height();

		// 画像幅を仮で画面幅にする
		var imgWidth = winWidth;
		// 画面幅と画像比率に合わせた画像高さを取得
		var imgHeight = Math.floor(bgHeight * (winWidth / bgWidth));
		// 画面高さと画像高さから、画像が上下中央にくるtopの位置を取得
		var imgTop = (winHeight - imgHeight) / 2;
		// 画面幅 = 画像幅なので、leftは0
		var imgLeft = 0;

		// 画像高さが画面高さより大きい時
		if(imgHeight >= winHeight) {
		// 画像高さが画面高さ未満の時
		} else {
			// 画像高さを画面高さにする
			imgHeight = winHeight;
			// 画面高さと画像比率に合わせた画像幅を取得
			imgWidth = Math.floor(bgWidth * (winHeight / bgHeight));
			// 画面高さ = 画像高さなので、topは0
			imgTop = 0;
			// 画面幅と画像幅から、画像が左右中央にくるleftの位置を取得
			imgLeft = (winWidth - imgWidth) / 2;
		}

		// 画像のサイズと位置の指定
		bgImg.css({
			top: imgTop,
			left: imgLeft,
			width: imgWidth,
			height: imgHeight
		})
	}
	adjust();

	// ページ読み込み時、リサイズ時に画像調整を実行
	$(window).on('load resize', function() {
		adjust();
	});
});

コメントに書いてある通りですが、画像比率を保持した状態で、$backgroundをを完全に覆う+上下左右中央になるようにしています。(background-size: cover;と同じような状態)
画面いっぱいに画像を表示するデモページ