2013.04.21
css

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

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

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

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

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

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

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だけでbackgroundをフルスクリーンにする方法

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

HTMLのソース
 <img alt="full screen background image" src="画像のパス" id="full-screen-background-image" /> 
  <div id="wrapper">
    <p>ここにコンテンツが入る…</p>
  </div>
参照サイト: paulmason

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

関連する記事

コメント & トラックバック
  1. […] 背景画像の設置方法がもっと詳しく書いてあります。CSSだけで背景を画面全体にする方法!! […]


  2. […] 参考ページ:CSSだけで背景を画面全体にする方法 […]


  3. […] >>CSSだけで背景を画面全体にする方法 | Ri-mode Rainbow Author: スポンサードリンク […]


コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP