skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

画像を背景に100%で表示させるJavaScript「fullscreenr」

｜ ｜ ｜ ｜ ｜ ｜ ｜

画面いっぱい背景画像を使いたいことはありませんか？
JavaScriptライブラリのjQueryプラグイン「fullscreenr」を使用することで、導入することが可能です。

使用方法
fullscreenrからファイル一式をダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.fullscreenr.js"></script>
<script type="text/javascript">
var FullscreenrOptions = {
width: 1024, //元画像の幅
height: 683, //元画像の高さ
bgID: '#id名'
};
jQuery.fn.fullscreenr(FullscreenrOptions);
</script>

またCSSで以下を記述する必要があります。
<style>
body {
overflow:hidden;
padding:0;margin:0;
height:100%;width:100%;
}
#id名 {
position:absolute;
z-index: -1;
}
</style>

最後に背景にしたい画像にidを付与して書きます。
<img id="id名" src="画像パス" />
画像を背景に100%で表示させるJavaScript「fullscreenr」サンプル

記事作成：2009年12月15日

前の記事：簡単導入！画像をズームさせるJavaScript「loupe | a jQuery image magnifier」
次の記事：棒グラフを簡単に表示できるJavaScript「Horizontal Bar Graph in jQuery」