<!-- 画像のサイズは指定しない -->
<div id="bg-fill-image">
<img src="http://placekitten.com/g/1024/768">
</div>

<div id="wrapper">
<!-- 通常のコンテンツはここに書く -->
</div>

html {
	/* 内包する要素に関わらず高さを保持する */
	height: 100%;
}
body {
	margin: 0;
	padding: 0;

	/* 内包する要素に関わらず幅・高さを保持する */
	width: 100%;
	height: 100%;

	/* IE6対応 */
	_overflow-y: hidden;
	_overflow-x: auto;
}
#bg-fill-image {
	/* 背面に固定表示 */
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;

	/* 内包する要素に関わらず幅・高さを保持する */
	width: 100%;
	height: 100%;

	/* 画像サイズより小さくならないようにする */
	min-width: 1024px;
	min-height: 768px;

	/* ハミ出した部分は隠す */
	overflow: hidden;

	/* IE6対応 */
	_position: absolute;
}
#bg-fill-image img {
	/* line-height 消し */
	display: block;

	/* この指定でアスペクト比が変わらないようになる */
	min-width: 100%;
	min-height: 100%;

	/* IE6対応 */
	_width: 100%;
	_height: 100%;
}
/* 画像の幅よりウィンドウの幅が狭い場合 */
@media screen and (max-width: 1024px){
	#bg-fill-image {
		/* ウィンドウの幅/2 - 画像の幅/2 */
		left: 50%;
		margin-left: -512px;
	}
}
/* 画像の高さよりウィンドウの高さが狭い場合 */
@media screen and (max-height: 768px){
	#bg-fill-image {
		/* ウィンドウの高さ/2 - 画像の高さ/2 */
		top: 50%;
		margin-top: -384px;
	}
}

/* 通常のコンテンツを囲うラッパー */
#wrapper {
	/* IE6対応 */
	_position: relative;
	_width: 100%;
	_height: 100%;
	_overflow: auto;
}