画像を背景に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="画像パス" />

サンプル

あ、この裏に・・・
Javascriptサンプルページ一覧

skuare.net