[JS]背景画像をブラウザの枠いっぱいに広げて表示するスクリプト -fullscreenr
Post on:2010年11月8日
sponsors
背景画像のアスペクト比を維持しつつ、ブラウザの枠いっぱいに広げて表示するスクリプトを紹介します。
デモではオプションで、ドットの画像をオーバーレイさせています。
Full screen, scaling and centered background with jQuery
デモページ
[ad#ad-2]
スクリプトがオフの場合は、下記のようになります。
スクリプトがオフ時の表示
fullscreenrの実装
fullscreenrはjQueryのプラグインのため、実装にはjquery.jsが必要です。
HTML
当スクリプト（jquery.fullscreenr.js）とjquery.jsを外部ファイルとして記述します。
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="js/jquery.fullscreenr.js" type="text/javascript"></script>
JavaScript
head内に下記のスクリプトを記述します。
<script type="text/javascript">
var FullscreenrOptions = { width: 1024, height: 683, bgID: '#bgimg' };
jQuery.fn.fullscreenr(FullscreenrOptions);
</script>
「width」と「height」には使用する画像の実サイズを記述します。「#bgimg」は画像を背景として表示するdiv要素などのidを記述します。
[ad#ad-2]
HTML
#realBody内のコンテンツが表示されます。
コンテンツ内（.exampleDiv）は自由に変更してください。
<body> <img id="bgimg" src="img/bg.jpg" /> <div id="realBody"> <div class="exampleDiv"> コンテンツ </div> </div> </body>
CSS
最後にスタイルシートです。
オーバーレイさせるドットの画像を変更する際は「raster.png」を変更します。
body {
overflow:hidden;
padding:0;margin:0;
height:100%;width:100%;
}
#bgimg {
position:absolute;
z-index: -1;
}
#realBody{
position:absolute;
z-index: 5;
overflow:auto;
height:100%;width:100%;
background: url('../img/raster.png');
}
sponsors
