WEB制作のメモ帳

衆トップページ -> WEB制作のメモ帳 -> jquery -> jquery「maxImage」でディスプレイにあわせて画面いっぱいに背景画像を表示

jquery「maxImage」でディスプレイにあわせて画面いっぱいに背景画像を表示

2011-04-29

jquery

jquery「maxImage」でディスプレイにあわせて画面いっぱいに背景画像を表示

ビジュアルを前面に押し出したホームページ作成をする時に
背景画像を全画面に表示してほしいと希望される場合もあるので
画面にあわせて背景画像のサイズを自動調節できるスクリプトをメモ

■使用するjqueryライブラリー
jquery.maximage.js
http://webcre.up.seesaa.net/image/jquery.maximage.js
jquery-1.4.2.min.js
http://webcre.up.seesaa.net/image/jquery-1.4.2.min.js

無料ホームページ素材

SOURCE
■HTML
ヘッダーに導入
<script src="js/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.maximage.js" type="text/javascript" charset="utf-8"></script>

2.body内にimg要素で記述する
<img src="bg.jpg" class="bgmaximage" />

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

■CSS
<style>
img.bgmaximage {position:fixed !important;}
</style>
参考サイト
maxImage Scaling Plugin
http://www.aaronvanderzwan.com/maximage/

WEB制作の定番書