NeGiMeMo.net

ねぎさんのメモ帳。日常・メモ・ときどきWordPress。

jQueryで背景画像を比率を崩さずウィンドウいっぱいに貼り付ける

bell賞味期限切れコンテンツ

この記事は公開または最終更新から1016日くらい経過しています。
このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。

CSS3使えよって話ですが。

IE7とかでも見せないと行けないことがまだまだあるので…。

やってみる

まず、bodyの直下とかに画像タグを入れてそこに背景にしたい画像を入れます。
その際、画像のIDは「#page_background」とします。

CSSやJSで指定を合わせれば別になんでもOKです。

 続いてスタイルシートを作成します。

 Sass(SCSS)でさくっとやるならこんな感じ

最後に jQuery を書きます。

 簡単に説明

背景画像のアスペクト比を調べておいて、ウィンドウの大きさ(というかウィンドウ枠のアス比)に応じて幅または高さのどっちかだけを100%になるようにすればOKらしいです。

ただ、このままだと、例えばメインの要素を960pxで確保している状態でウィンドウがそれより狭くなっている場合(つまり横スクロールバーが出ちゃってる状態)ですと、背景はウィンドウの現在の横幅基準で100%になるため、横にスクロールした時に背景がない状態となってしまいます。

そこで、ウィンドウ幅が960pxより小さくなった場合は、画像の幅を960pxで固定するようにすることでそれ以上縮小されないようにしています。

これでだいたい望んだ形になりました。

ちなみにIE6だと重ならないらしいです。
まぁ、IE6も対応させたいのにそんな無茶言うな、と。

古いブラウザをバシバシ捨てていいならCSS3とかでやれば多分もっと楽できるとおもうんですがねぇ。

background-size-CSS3リファレンス

参考:

Perfect Full Page Background Image | CSS-Tricks

背景画像をブラウザの枠いっぱいに表示するテクニックの考察 | コリス

TAGS