FC2ブログ

デザインの小技 背景の画像をフルスクリーンにして固定するスクリプト

Masa

ウェブサイトデザインでいつも困るのが背景(といっても、デザインすべてに常に困っているのですが)

背景が画面いっぱいに広がるとすごくインパクトありますね

CSSのみで設定するのもいいのですが。(以前はCSSのみで設定しました)
コレだとちょっと古いブラウザで読み込まないのが難点でした IE6だとアウト
まだまだIE6ユーザーが多いので、jQueryのプラグインで対応できるそうです。デモサイトみつけたのでコチラをどうぞノ
DEMOサイト

ページ中央くらい Download it からダウンロードページにいけます
そこのDownloads からtxt形式のjsを落としてきて、.jp になるようにリネーム

あとはサーバーにアップして
CSSとhtmlに記述をすればいいだけですね。色々昨日はあるようですが
指定画像を画面いっぱいに背景にして固定する(一番オーソドックスだと思われる使用方法)を簡単に記述しておきます。

htmlのヘッダーにスクリプトの指定

<script src="(ダウンロードしたJSファイルをアップしたディレクトリを指定)/jquery.maximage.js" type="text/javascript" charset="utf-8"></script>

<script>
$(function(){ jQuery('img.bgmaximage').maxImage({
isBackground: true,
overflow: 'auto'
});
});
</script>

bodyタグ内に画像の指定を
<img src="image/haikei.jpg" class="bgmaximage" />


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


上記 importantで、Mozilla, Opera に対して優先順位を上げて固定配置にする


これで背景画像がウィンドいっぱいに広がり固定表示となる(はず)

画像の画質とサイズを調整しないとすごく重いサイトになってしまうので注意ですね


ちなみにjs使えない場合のCSSのみで同じ事をする場合の記述方法を紹介
まずは、htmlファイルへの記述
<img class="bgmaximage" src="img/haikeigazou.jpg" alt="" />
<div id="container">
↑と↓をコンテンツの上下に配置
</div>

CSSに

img.bgmaximage {
min-height: 100%;
min-width: 1024px; /* これ以上は画像は縮小されない */
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}

/* 表示ディスプレイが最小表示よりも小さい場合の設定 */
@media screen and (max-width: 1024px){
img.bgmaximage {
left: 50%;
margin-left: -512px; }
}

/* 背景固定用の親を指定 */
div#container {
position: relative;
}

これでできる(はず)
ただし、先述の通り、IE6だと背景画像の下にコンテンツが表示されちゃうので一般向けサイトには不向きかもしれません。

スポンサーサイト
Posted byMasa

Comments 0

There are no comments yet.

Leave a reply