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

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

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

<div class="highlighter-rouge">
<pre class="highlight"><code>/* 内包する要素に関わらず幅・高さを保持する */
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;
} }
</code></pre>
</div>

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