１枚の画像を全体背景として使う方法（画像の大きさ変化）

★　１枚の画像を全体背景として使う方法（画像の大きさ変化）
　　（画面（ウインドウ）の大きさを変えると画像の大きさが変わる）


◆　やりかた。

①　画像は、画像フォルダからアップロードして画像のＵＲＬを求めます。
http://ameblo.jp/new-blue-777/entry-11222299184.html

ＣＳＳ編集ページから画像はアップロードしないでください。
（画質が悪い）

画像の横幅は、８００pxにする。




②　下記をフリースペースまたは、フリープラグインへ入れます。

<div id="back_image"><img src="画像のURL"></div>

② 下記をCSSへ追記する

#back_image img{
position:fixed;/* 固定 */
top:0px;/* 上 */
left:0px;/* 下 */
z-index:-10;/* 優先度を下げる */
width:100%;/* 画面の大きさに合わせる */
min-width:100px;/* 最小幅 */
max-width:1700px;/* 最大幅 */
height:auto;/* 自動 */
}
body,.skinBody,html{/* 背景は指定しない */
background-image:none;
}

■　min-width:100px; は調整すること。








◆　ランダムに画像を変えたい場合。


①　フリープラグインへ下記を追記する

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<div id="back_image"><img src=""></div>
<script type='text/javascript'>
image = new Array();
image[0]='画像のＵＲＬ①';
image[1]='画像のＵＲＬ②';
image[2]='画像のＵＲＬ③';
image[3]='画像のＵＲＬ④';
image[4]='画像のＵＲＬ⑤';
x=Math.floor(Math.random()*image.length);
$('#back_image img').attr("src",image[x]);
</script>

●　注意：画像のＵＲＬ①～⑤で、画像のＵＲＬを指定しない行は削除する。
　　　　　<div id="back_image"><img src=""></div>　では、
　　　　　画像のＵＲＬは指定しなくてもいいです。

・　下記はフリープラグインの最初に１つあればＯＫです。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>




② 下記をCSSへ追記する

#back_image img{
position:fixed;/* 固定 */
top:0px;/* 上 */
left:0px;/* 下 */
z-index:-10;/* 優先度を下げる */
width:100%;/* 画面の大きさに合わせる */
min-width:100px;/* 最小幅 */
max-width:1700px;/* 最大幅 */
height:auto;/* 自動 */
}
body,.skinBody,html{/* 背景は指定しない */
background-image:none;
}

■　min-width:100px; は調整すること。