2013.04.21
CSSだけで背景を画面全体にする方法
CSS3 ・ サンプルあり ・ 画像フルスクリーンで画像を背景として配置する方法です。
backgroundで背景全体が写真になるだけでオシャレなサイトになりますよね。
いろいろ方法はあるようですが、2つ紹介します。
CSSだけでbackgroundをフルスクリーンにする一番簡単な方法
IE8以下がサポートされていないのが悩ましいところですが、ソースがとってもシンプル。

CSSのソース
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-TRICKS
CSSだけでbackgroundをフルスクリーンにする妥当な方法
上記の方法よりは簡単というわけではありませんが、こちらはIE7もOKです。
(IE6は試してませんが、ダメなようです。)

CSSのソース
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にすると背景画像が固定されず、スクロールが反映されます。
背景画像を固定する方法、固定しない方法、使い分けによってはデザインの幅が広がりますね。
HTMLのソース
<img alt="full screen background image" src="画像のパス" id="full-screen-background-image" /> <div id="wrapper"> <p>ここにコンテンツが入る…</p> </div>
参照サイト: paulmason
jqueryを使った方法もありますが、背景を表示させたいだけならCSSで十分な気がします。
2013.05.09 10:26 PM
[…] 背景画像の設置方法がもっと詳しく書いてあります。CSSだけで背景を画面全体にする方法!! […]
2013.05.09 5:13 PM
[…] 参考ページ:CSSだけで背景を画面全体にする方法 […]
2013.04.21 11:40 AM
[…] >>CSSだけで背景を画面全体にする方法 | Ri-mode Rainbow Author: スポンサードリンク […]