[JS]背景画像をブラウザの枠いっぱいに広げて表示するスクリプト -fullscreenr

背景画像のアスペクト比を維持しつつ、ブラウザの枠いっぱいに広げて表示するスクリプトを紹介します。
デモではオプションで、ドットの画像をオーバーレイさせています。

デモのキャプチャ

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');
}

via: Effortless Full Screen Background Images With jQuery

sponsors

top of page

©2018 coliss