CSS3使えよって話ですが。
IE7とかでも見せないと行けないことがまだまだあるので…。
やってみる
まず、bodyの直下とかに画像タグを入れてそこに背景にしたい画像を入れます。
その際、画像のIDは「#page_background」とします。
CSSやJSで指定を合わせれば別になんでもOKです。
|
1 |
<img src="img/common/wall.png" alt="" id="page_background"> |
続いてスタイルシートを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
#page_background { position: absolute; top: 0; left: 0; z-index: -1; } #page_background.w100p { width: 100%; } #page_background.w960 { width: 960px; } #page_background.h100p { height: 100%; } |
Sass（SCSS）でさくっとやるならこんな感じ
|
1 2 3 4 5 6 7 8 9 |
#page_background { position: absolute; top: 0; left: 0; z-index: -1; &.w100p { width: 100%; } &.w960 { width: 960px;} &.h100p { height: 100%; } } |
最後に jQuery を書きます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
$(function() { var theWindow = $(window), $bg = $('#page_background'), aspectRatio = $bg.width() / $bg.height(); function bgResize() { if ((theWindow.width() / theWindow.height()) < aspectRatio ) { if (theWindow.width() < 960) { $bg .removeClass() .addClass('w960'); } else { $bg .removeClass() .addClass('h100p'); } } else { if (theWindow.width() < 960) { $bg .removeClass() .addClass('w960'); } else { $bg .removeClass() .addClass('w100p'); } } } theWindow.resize(function() { bgResize(); }).trigger('resize'); }); |
簡単に説明
背景画像のアスペクト比を調べておいて、ウィンドウの大きさ（というかウィンドウ枠のアス比）に応じて幅または高さのどっちかだけを100%になるようにすればOKらしいです。
ただ、このままだと、例えばメインの要素を960pxで確保している状態でウィンドウがそれより狭くなっている場合（つまり横スクロールバーが出ちゃってる状態）ですと、背景はウィンドウの現在の横幅基準で100%になるため、横にスクロールした時に背景がない状態となってしまいます。
そこで、ウィンドウ幅が960pxより小さくなった場合は、画像の幅を960pxで固定するようにすることでそれ以上縮小されないようにしています。
これでだいたい望んだ形になりました。
ちなみにIE6だと重ならないらしいです。
まぁ、IE6も対応させたいのにそんな無茶言うな、と。
古いブラウザをバシバシ捨てていいならCSS3とかでやれば多分もっと楽できるとおもうんですがねぇ。
コメントする