CSSだけで背景を画面全体にする方法

フルスクリーンで画像を背景として配置する方法です。
backgroundで背景全体が写真になるだけでオシャレなサイトになりますよね。

いろいろ方法はあるようですが、2つ紹介します。

CSSだけでbackgroundをフルスクリーンにする一番簡単な方法

IE8以下がサポートされていないのが悩ましいところですが、ソースがとってもシンプル。

html { 
  background: url(画像のパス) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

CSSに上記を記述するだけです。

サポートされているブラウザ

• Safari 3以上
• ChromeならどのバージョンもOK
• IE 9以上
• Opera 10以上
• Firefox 3.6以上

IE独自のプロパティであるfilterを使えばIEでも背景の表示自体は問題ないようですが、リンクやスクロールバーがうまく機能しない問題が出てくる時があるようです。

CSSだけでbackgroundをフルスクリーンにする妥当な方法

上記の方法よりは簡単というわけではありませんが、こちらはIE7もOKです。
（IE6は試してませんが、ダメなようです。）

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
#full-screen-background-image {
  z-index: -999;
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}
#wrapper {
  position: relative;
  width: 760px;
  min-height:200px;
  margin: 100px auto 0;
  color: #f5f5f5;
  background: rgba(0, 0, 0, 0.50);
  padding:20px 30px;
}

13行目のpositonをabsoluteにすると背景画像が固定されず、スクロールが反映されます。
背景画像を固定する方法、固定しない方法、使い分けによってはデザインの幅が広がりますね。

 <img alt="full screen background image" src="画像のパス" id="full-screen-background-image" /> 
  <div id="wrapper">
    <p>ここにコンテンツが入る…</p>
  </div>

jqueryを使った方法もありますが、背景を表示させたいだけならCSSで十分な気がします。