画像を背景いっぱいに敷くjQueryプラグイン「Fullscreen Background for jQuery」

画像を背景いっぱいに敷くjQueryプラグイン「Fullscreen Background for jQuery」サンプル 画像を背景に敷き詰めることでインパクトのあるデザインになります。
これを実現するのがjQuery plugin: Fullscreen Background - Gaya Designです。
ウィンドウサイズにあわせて自動でフルスクリーンで表示してくれます。

使用方法 jQuery plugin: Fullscreen Background - Gaya Designからファイルをダウンロード。
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.fullscreenBackground.js"></script>
<script>
$(function(){
$("#id名").fullscreenBackground();
});
</script>

JavaScriptを記述したら、背景画像を指定します。
<div id="content">
コンテンツはここに
</div>
<div id="id名">
<img src="画像パス" width="" height=""/>
</div>

最後にCSSでコンテンツの表示位置を調整すれば完成です。
#content {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
}

画像を背景いっぱいに敷くjQueryプラグイン「Fullscreen Background for jQuery」サンプル

sponsors

「画像を背景いっぱいに敷くjQueryプラグイン「Fullscreen Background for jQuery」」をシェアする

記事作成:
記事URL:

TOP > > > 画像を背景いっぱいに敷くjQueryプラグイン「Fullscreen Background for jQuery」