カテゴリ:jQuery( 1 )

 

jQueryで、画面いっぱいに背景画像を表示する方法

参照元さんから
ちょっとカスタマイズ
body の margin 0px が効かなくなる説明だったので・・・

Backstretch から jQuery Backstretch をダウンロード


あとは下記のように記述

< !doctype html>
< html style=" height:100%;">
< head>
< meta charset="utf-8" />
< title>test< /title>
< /head>
< body style="margin:0px; height:100%;">

< div style="width:100%; text-align:center; height:100%;">
< div style="width:600px; background-color:#FFFFFF; text-align:center; margin:0 auto; height:100%;" align="center">
aaaaa
< /div>
< /div>
< scri pt src="./js/jquery.min.js">
< scri pt type="text/javascript" src="./js/jquery.backstretch.min.js">

< scri pt type="text/javascript">
$( function(){
$.backstretch("./images/shinrin.jpg");
});
< /sc ript>
< /body>
< /html>


CSSをタグに埋め込んだのはご愛嬌として
jQuery本体と、backstretchを読み込んで
背景画像を指定するだけです。

今回、$( function) を使い、bodyの最下部に記述しているのは
ドキュメントを最初に読み込ませ、最後にjQuery処理を走らせています。
ちょっと早くなるけど、あんまり重たい作業を最後に持ってくると
背景画像の表示までにタイムラグが発生するから、どっちがいいかですね。

最初にjQueryを処理させたい場合は、下記のような感じ

< !doctype html>
< html style=" height:100%;">
< head>
< meta charset="utf-8" />
< title>test< /title>
< /head>
< body style="margin:0px; height:100%;">
< scri pt src="./js/jquery.min.js">
< scri pt type="text/javascript" src="./js/jquery.backstretch.min.js">

< scri pt type="text/javascript">
$.backstretch("./images/shinrin.jpg");
< /scrip t>

< div style="width:100%; text-align:center; height:100%;">
< div style="width:600px; background-color:#FFFFFF; text-align:center; margin:0 auto; height:100%;" align="center">
aaaaa
< /div>
< /div>
< /body>
< /html>



参照元:http://miha5.com/2012/09/2666/



[PR]

by hiro__neko | 2013-06-21 12:01 | jQuery