ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ

Posted under - Web Design

48

ディスプレイサイズ(ブラウザサイズ)いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけた jQuery のプラグインを使って、いろいろ試してみたりしたのでレビューをまとめてみました。

Perfect Full Page Background Image

背景に画像を使った Webサイトってたくさんありますよね。大きくてキレイな画像は、見た目にもインパクトがあってとても印象的です。でも Webサイトを閲覧している人の環境は様々で、ディスプレイのサイズが違ったりするもの。ディスプレイ(ブラウザ)のサイズにあわせて、画像を拡大表示する方法はいくつかありますが、その中からいくつかをサンプル付きでご紹介します!

画面いっぱいに背景画像 目次

  1. CSSのみで画面いっぱいに背景画像
  2. jQuery プラグイン fullscreenr を使ってみた
  3. Full Size Background Image jQuery Plugin を使ってみた
  4. jQuery maxImage Scaling Pluginがおすすめです
  5. 大きな背景画像を使ったWebサイト:まとめリンク

1. CSSのみで画面いっぱいに背景画像

まずは比較的簡単にできる、CSS での表現です。スライドショー機能はありませんが、とにかく画面いっぱいに画像を背景指定したいう人にはいいかも。

HTML

<img class="bg" src="images/background.jpg" alt="" />
<div id="container">
  ここにコンテンツ
</div>

HTML はコンテンツとなる div 要素の前に、クラスを付けた画像を入れておきます。

CSS

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;
  /* またはabsolute; */
  top: 0;
  left: 0;
}

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

div#container {
  position: relative; 
}

img.bg が背景にする画像の部分です。position:fixed にすれば、スクロールしても背景画像は固定されたままです。position:absolute を指定した場合は、背景画像も一緒にスクロールしますが、画像の下端が不自然にならないように工夫が必要ですね。

コンテンツとなる #container には、position:relative を忘れずに!サンプルも作ったので、ぜひ見てみてください。

SAMPLE

残念ながら IE6 には対応していません。IE6 だと画像の下にコンテンツがレイアウトされてしまいます。

参考にしたCSS TRICKSでは、<table> タグと Javascript を使って、IE6 にも対応させるテクニックも紹介されています。


レビュー

Firefox 3.6、Safari 5、Chrome 5、Opera 10.6、IE8、IE7 で確認済みです。IE6 はダメですけど、ブラウザサイズに合わせて伸縮するし、これは使えるテクニックですねー。おすすめです!

2. jQuery プラグイン fullscreenr を使ってみた

jQuery のプラグイン fullscreenr を使って、画面いっぱいに背景画像を表示してみました。こちらのプラグインもスライドショー機能は付いていません。ちょっと気になったので早速試してみました。

HTML

<head>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.fullscreenr.js" type="text/javascript"></script>
</head>
<body>
  <img id="bgimg" src="images/background.jpg" alt="" />
  <div id="realBody">
  ここにコンテンツ
  </div>
</body>

XHTML はシンプルで、<body> の最初に背景画像を表示します。その次の #realBody が、疑似的な body になります。

jQuery

<script type="text/javascript">
    var FullscreenrOptions = {  width: 1024, height: 683, bgID: '#bgimg' };
    jQuery.fn.fullscreenr(FullscreenrOptions);
</script>

画像の縦横比を維持する為に、widthheight には、背景に使う画像の実際のサイズを入れます。bgID: '#bgimg' には背景に使う画像につけた ID を指定します。

CSS

body {
    overflow:hidden;
    padding:0;
    margin:0;
    height:100%;
    width:100%;
}
 
#bgimg {
    position:absolute;
    z-index: -1;
}
 
#realBody{
  position:absolute;
  z-index: 5;
  overflow:auto;
  height:100%;
  width:100%;
}

ボディに背景画像を拡大表示して、疑似ボディ(#realBody)を position:abusolute として従来のボディとして利用します。縦横比は維持されますが、画像の上辺がディスプレイの上辺にこないので注意が必要です。画像の中央を、ディスプレイの中央にあわせています(このへんは jQuery のコードをいじれば、top に合わせられますが…。)

Sample

サンプルを作りましたので、よかったら見てくださいね!

いい感じだと思ったんですけど、IE6/IE7 で問題発生です。body に overflow:hidden を指定してありますが、IE6/IE7 では背景画像の下端まで縦スクロールバーが表示されてしまいます。

コンテンツが長くなりスクロールするようになると、body のスクロールバーと、疑似ボディのスクロールバーの2本が表示されてしまい、とても見にくいページに…。

ちょっとクライアントワークには使えませんね。スクリプトをいじればいけそうですが…ちょっと残念です。


レビュー

先ほどの CSS のみの方がいいかもです。jQuery を引っ張り出すまでもないかもしれません …。IE7/IE6 での挙動を考えるとおすすめできませんねー。でもせっかくサンプル作ったのでブログには掲載してしまいました!

3. Full Size Background Image jQuery Plugin を使ってみた

ちょっと画像が上下に潰れてる … X(

jQuery のプラグイン Full Size Background Image jQuery Plugin を使って、画面いっぱいに背景画像を表示してみました。スライドショー機能は付いていません。

デモを見ると分かるのですが、画像の縦横比は維持されずに、ブラウザの大きさに依存しています。なのでブラウザサイズによって、画像がつぶれることもある … という事に注意が必要ですね。

HTML

<head>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jQuery.fullBg.js" type="text/javascript"></script>
</head>
<body>
<img src="sample-images/background01.jpg" alt="" id="background" class="fullBg" />
  <div id="maincontent">
  ここにコンテンツ
  </div>
</body>

jQuery が必要なので、プラグインのファイルとは別に、jQuery 本体を読み込んでくださいね。XHTMLはシンプルで id やクラスを付けた画像を貼っておくだけです。

また、さっきと同じように、擬似的な <body> になる、#maincontent という <div> 要素を加えます。

jQuery
$(function() {
	$("#background").fullBg();
});

CSS

/* 背景画像 */
.fullBg {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  /* height: 100%;を入れるとブラウザ間の表示差異がなくなります */
}

#maincontent {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  width: 100%;
}

背景画像は CSS で固定、またはコンテンツに合わせてスクロール … のどちらかを選ぶ事ができます。スクロールを選んだ場合は、画像の下端の処理に注意が必要ですね。その場合、背景画像のスタイルを .fullBg { position:absolute; } に書き変えてくださいね。

sample

これもサンプルを作りましたので、見ていただけるとうれしいです!

背景画像に height:100% を入れない場合、ブラウザ間での表示差異が生まれます。Firefox、IE では画像の縦横比を維持して背景画像が表示されますが、Safari、Chromeではブラウザのサイズに依存して、つぶれた感じになってしまいます。height:100% を入れると Firefox、IE でもブラウザサイズに依存するようになり、他のブラウザと同じように表示されます(でもサイズによってはつぶれちゃうんですけどね…)。

ちなみに IE6 では CSS で position:fixed を指定しても、コンテンツとともにスクロールしてしまいます。

これもクライアントワークにはちょっと使えそうにありません …。


レビュー

スクリプトのソースを見ると、ブラウザのサイズ、画像のサイズを取得して…ごにょごにょ…という割と簡単なコードで作られているのが分かります。でも CSS でもいいんじゃない?という感じのコードですし、画像がつぶれちゃう時点でおすすめできないですね …。これもせっかくサンプルで試したのでブログには掲載しました!

4. jQuery maxImage Scaling Plugin がおすすめです

いろいろ試してみたんですけど、jQuery ならやっぱり maxImage Scaling Plugin が一番いいかもです。パラメータを指定すれば、色んなオプション機能(スライドショーなど)も使えますし、IE7 を含めブラウザ間の差異もないようです。

  • via maxImage Scaling Plugin

    Demo

4.1. maxImage Scaling Plugin で画面いっぱいに背景

まずは一番簡単な、一枚の画像を、ディスプレイサイズいっぱいに拡大表示するパターンです。

HTML
<head>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.maximage.js" type="text/javascript"></script>
</head>
<body>
<img src="images/background.jpg" alt="" class="bgmaximage" />
<div id="maincontent">
ここにコンテンツ
</div>
</body>

XHTML は他の jQuery プラグインと同じように、コンテナの前に背景となる画像をクラスを付けて置いておきます。

CSS
img.bgmaximage{
  position:fixed !important;
}

#maincontent {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  width: 100%;
}

CSS はたったコレだけです。

jQuery
<script type="text/javascript">
$(function(){
	$('img.bgmaximage').maxImage({
		isBackground: true,
		overflow: 'auto',
		verticalAlign:'top'
 	});
});
</script>

オプションで、overflow: 'hidden' とすると、スクロールバーは表示されず、ブラウザのファーストビューのみの表示となります。コンテンツが長くなっても、スクロールバーが出なくなってしまうので注意してください。

また、verticalAlign:'top' の値で、画像の縦の配置位置を指定できます。

  • top : 画像の上辺をブラウザの上辺に合わせます
  • center : 画像のセンターを基準に配置します
  • bottom : 画像の下辺をブラウザの下辺に合わせます

Sample

サンプルを作りました!


レビュー

Firefox 3.6、Safari 5、Chrome 5、Opera 10.6、IE8、IE7 で動作確認済みです。やっぱり jQuery でフルスクリーン背景なら、これが一番いいかもです。おすすめです!

4.2. maxImage Scaling Plugin でスライドショー

maxImage Scaling Plugin には、スライドショー機能も付いているので、そちらもご紹介します。コードも先ほどのものに、ほんの少し加えるだけなので、簡単にできちゃいます。

HTML
<head>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.maximage.js" type="text/javascript"></script>
</head>
<body>
<img src="images/loading.gif" class="loader" />
<img src="images/background01.jpg" alt="" class="bgmaximage" alt="" />
<img src="images/background02.jpg" alt="" class="bgmaximage" alt="" />
<img src="images/background03.jpg" alt="" class="bgmaximage" alt="" />
<img src="images/background04.jpg" alt="" class="bgmaximage" alt="" />
<img src="images/background05.jpg" alt="" class="bgmaximage" alt="" />
<div id="maincontent">
  ここにコンテンツ
</div>
</body>

背景でスライドショーにしたい画像を body 直下に置いておきます。一応 lorder 画像も置いておきました。

CSS
.bgmaximage{
  position:fixed !important;
  display:none;
}

#maincontent {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  width: 100%;
}

.loader { 
  position:absolute;
  z-index:9999;
  width:39px;
  height:39px;
  top:49%;
  left:49%
}

CSS で注意する点は、背景画像を display:none にしておく事。あとはさっきと同じです。

jQuery
<script type="text/javascript">
$(function(){
  $('img.bgmaximage').maxImage({
    isBackground: true,
    slideShow: true,
    slideShowTitle: false,
    slideDelay: 5,
    overflow: 'auto',
    verticalAlign:'top'
  });
});
</script>

さっきに比べると、少しだけオプションが加わりました。

  • slideShow: true
    スライドショーをオンにします。
  • slideShowTitle: false
    画像のタイトルを表示/非表示(true/false)。
  • slideDelay: 5
    何秒でスライドショーが切り替わるかの時間で秒数です。

他にも色んなパラメータがありますが、詳しくは本家サイト – maxImage Image Scaling を見てくださいね。

Sample

これもサンプル作ったので、みてくださいね!


レビュー

画像のスライドショーと同時にコンテンツも切り替えたい … というようなことはできませんが、背景画像を切り替えたい … という人にはおすすめです!簡単に設置できるのも嬉しいですね。全部の機能は試してませんが、代表的な機能は Firefox 3.6、Safari 5、Chrome 5、Opera 10.6、IE8、IE7 で動作確認済みです。

大きな背景画像を使ったWebサイト

下記のリンク先では、大きな背景画像を使った Webサイトがまとめられています!


今回は、ディスプレイいっぱいに背景画像を表示するリソースを、サンプル付きでまとめてみました!

Comments

Thank you for the comment.