ホーム >>> HTML整理ノート

background-repeat 背景画像の繰り返し方法

背景画像の挿入方法(繰り返し方法）を指定。開始位置は要素の左上から。

書式
　background-repeat:repeat･･･(初期値)要素全体に、画像をタイル状に敷き詰める。
　background-repeat:repeat-x ･･･要素の横方向にだけ，画像を繰り返す。
　background-repeat:repeat-y ･･･要素の縦方向にだけ，画像を繰り返す。
　background-repeat:no-repeat ･･･画像を１回だけ表示し繰り返さない。

Sample

・ページ全体にCSSファイルで
　　　　body {background-image : url(../images/bg/wallppr_gra.gif);
　　　　　　　　background-repeat:repeat-y}　
　が設定されている（左端のグラデーション）

　　　　　　　　　　　　　　　

元の背景画像･･･

background-repeat:repeat
background-repeat:repeat-x
background-repeat:repeat-y
background-repeat:no-repeat
Scriptプロパティ＜backgroundRepeat＞

一番下の背景画像の繰り返し方法を変更する

Sample Source......................................................................>>>

<div style="background-image : url(../../images/bg/tairu1.gif);background-repeat:repeat;
　　　　border:2px solid navy;width:300px;height:160px;">background-repeat:repeat</div>
<div style="background-image : url(../../images/bg/tairu1.gif);background-repeat:repeat-x;
　　　　border:2px solid navy;width:300px;height:160px;">background-repeat:repeat-x</div>
<div style="background-image : url(../../images/bg/tairu1.gif);background-repeat:repeat-y;
　　　　border:2px solid navy;width:300px;height:160px;">background-repeat:repeat-y</div>
<div id="dv" style="background-image : url(../../images/bg/tairu1.gif);
　　　background-repeat:no-repeat;border:2px solid navy;width:300px;height:160px;">
　　　background-repeat:no-repeat</div>

<button onclick="dv.style.backgroundRepeat='repeat'">repeatにする</button>
<button onclick="dv.style.backgroundRepeat='repeat-x'">repeat-xにする</button>
<button onclick="dv.style.backgroundRepeat='repeat-y'">repeat-yにする</button>
<button onclick="dv.style.backgroundRepeat='no-repeat'">no-repeatにする</button>