Maximage－ウィンドウサイズいっぱいに背景画像を表示

ウィンドウサイズいっぱいに背景画像を表示するjQueryです。
このページがサンプルになっています♪

[Maximage設定方法]

1）maxImage Scaling Pluginをダウンロードしておきます。

2）HTMLの記述を以下のようにします。

headタグ内には、事前にダウンロードした”jQuery”と”maxImage Scaling Plugin”を読み込むように記述しておきます。
背景画像はbodyタグの下、コンテンツの前に記述しておきます。

<head>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.maximage.js" type="text/javascript"></script>
</head>
<body>
<img src="背景画像へのパスを入れます" alt="" class="bgmaximage" />
<div id="maincontent">
ここにコンテンツを入れます
</div>
</body>
</html>

2）cssの記述を以下のようにします。

img.bgmaximage {
    position:fixed !important;
}
 
#maincontent {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
    width: 100%;
}

2）javascriptの記述を以下のようにします。

headタグ内に記述しておきましょう。

ウィンドウサイズいっぱいに表示された画像が、ウィンドウのサイズに合わせて拡大縮小されるか試してみてください！
背景用の画像が小さすぎると、ウィンドウサイズが大きい場合画像が鮮明でなくなるので、ちょっと大きめで用意してくださいね！では次は、このソースに一部記述を加えて、複数用意した背景用画像が切り替わるようにしてみましょう♪

ウェブデザインラボ