[CSS]大きい画像をブラウザのサイズに合わせて背景に表示するスタイルシート

CSS-Tricksから、大きい画像を余白を作らずにブラウザのサイズに合わせて、背景に表示するスタイルシートを紹介します。

Perfect Full Page Background Image

下記、それを実装する要件とテクニックを二つ、それぞれポイントをピックアップして紹介します。

実装の要件

前提として、画像のサイズを調整する必要があるため、background-imageプロパティでの配置は不適格とします。
それを踏まえ、以下の条件をクリアさせます。

• ページは画像でいっぱいに、余白は無しで
• 画像の大きさは自動調整
• 画像の比率は維持
• 画像はページ中央に
• 画像はスクロールさせない
• クロスブラウザ対応

一つ目のテクニックは余分なマークアップが必要で、IE6用にJavaScriptを使用したものを紹介しています。
二つ目のテクニックは、余分なマークアップを無くし、JavaScriptも必要としないものです。

Technique #1

画像をtable内にインラインイメージとして配置し、height, witdhを100%、overflow:hidden;と指定して、その親divをposition:absolute;で配置を行います。

デモ

demo:1

HTML

<div id="bg">
<div>
<table cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/bg.jpg" alt=""/></td>
</tr>
</table></div>
</div>

CSS&JavaScript

コードは、デモを参照ください。

Technique #2

インラインイメージとして配置した画像に、クラス名をつけるだけの余分なマークアップは無いテクニックです。
唯一の注意点は、IE7では中央に配置されずIE6は非対応です。しかしながら、よりシンプルに実装が可能となっています。

デモ

demo:2

HTML

<img src="images/bg.jpg" class="bg" />

CSS

ボックスにはCSS3でシャドウをつけ、立体的にしています。

img.bg {
	/* Set rules to fill background */
	min-height: 100%;
	min-width: 1024px;

	/* Set up proportionate scaling */
	width: 100%;
	height: auto;

	/* Set up positioning */
	position: fixed;
	top: 0;
	left: 0;
}

@media screen and (max-width: 1024px){
	img.bg {
		left: 50%;
		margin-left: -512px; }
}

div#content {
	/* This is the only important rule */
	/* We need our content to show up on top of the background */
	position: relative; 

	/* These have no effect on the functionality */
	width: 500px;
	margin: 0 auto;
	background: #fff;
	padding: 20px;
	font-family: helvetica, arial, sans-serif;
	font-size: 10pt;
	line-height: 16pt;
	-moz-box-shadow: #000 4px 4px 10px;
	-webkit-box-shadow: #000 4px 4px 10px;
}

body {
	/* These rules have no effect on the functionality */
	/* They are for styling only */
	margin: 0;
	padding: 20px 0 0 0;
}