背景画像をブラウザの枠いっぱいに表示するテクニックの考察
Post on:2010年11月26日
sponsorsr
最近のトレンドの一つでもある背景画像をブラウザの枠いっぱいに表示する実装方法はたくさんあります。その中から、理にかなった最新のテクニックや、より多くのブラウザに対応させるテクニックを紹介します。
Perfect Full Page Background Image
[ad#ad-2]
下記は各ポイントを意訳したものです。
各デモはページ下部のDownload Files」で、まとめてダウンロードできます。
背景画像をブラウザの枠いっぱいに表示するテクニックとは
前提として、下記のポイントが挙げられます。
- 画像でページをいっぱいにします。
空きは無いようにします。 - 画像のサイズは必要があれば調整します。
- 画像の表示はアスペクト比を維持します。
- 画像の配置はページの中央です。
- スクロールバーは表示しません。
- 可能な限り、対応ブラウザを多くします。
- Flashは使用しません。
CSS3を使ったテクニック
これはもっとも簡単で、プログレッシブな方法です。
CSS3の「background-size:cover;」で、目的通りにこれを実装することができます。ただし、CSS3対応ブラウザのみとなります。
CSS
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
デモ
対応ブラウザ
- Safari 3+
- Chrome
- IE 9+
- Opera 10+
- Firefox 3.6+
[ad#ad-2]
CSSだけで実装するテクニック：その1
ポイントは使用する画像のアスペクト比を維持しつつ、ブラウザの枠いっぱに表示することです。
そこで、各ブラウザでサイズを変更することが可能であるインラインのimg要素を使用します。画像を常に100%のサイズで表示するようにし、決して少なくならないように設定します。このテクニックのポイントはMedia Queriesで、ネガティブマージンを使い真ん中に配置していることです。
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;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
デモ
対応ブラウザ
- Safari, Chrome, Opera, Firefox
- IE9
- IE7/8は画像のサイズが大きい場合のみ動作します。
CSSだけで実装するテクニック：その2
「position:fixed;」を使用したさらに簡単な方法です。「min-width」と「min-height」には単純に「100%」を指定します。
HTML
<img src="images/bg.jpg" id="bg" alt="">
CSS
#bg {
position:fixed;
top:0;
left:0;
/* Preserve aspet ratio */
min-width:100%;
min-height:100%;
}
上記の方法は画像を中央に配置することができません。そのためには、img要素をdiv要素で内包する必要があります。
HTML
<div id="bg"> <img src="images/bg.jpg" alt=""> </div>
CSS
#bg {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
}
#bg img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}
デモ
対応ブラウザ
- Safari, Chrome, Firefox
- IE8+
jQueryを使ったテクニック
これを実装するには、インラインのimg要素のアスペクト比がブラウザの枠に比べて大きいか小さいか分かっていれば、事は簡単です。もし小さければ幅だけを100%にし、大きければ高さだけを100%にすれば、ブラウザの枠いっぱいに表示することができます。
この情報をjQueryを使用して取得します。
HTML
<img src="images/bg.jpg" id="bg" alt="">
CSS
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
JavaScript
$(function() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(function() {
resizeBg();
}).trigger("resize");
});
[/javascript]
デモ
デモページ
※キャプチャはIE7
対応ブラウザ
- Safari, Chrome, Opera, Firefox, IE7+
- IE6は非対応
背景画像とコンテンツが重ならずに配置されます。
sponsors
