×

[PR]この広告は3ヶ月以上更新がないため表示されています。
ホームページを更新後24時間以内に表示されなくなります。

background-repeat 【背景画像 表示の繰り返し方】

[IE5] [IE6] [IE7] [Fx1] [Fx2] [Op6] [Op7] [Ns6] [Ns7]

background-repeatプロパティは、背景画像の表示開始位置を指定する事が出来ます。値を横方向・縦方向の順にスペースで区切ってそれぞれ指定する事も出来ます。

repeat
縦横ともに、背景画像を繰り返して表示します。初期値です。

repeat-x
横方向のみ繰り返して表示します。

repeat-y
縦方向のみ繰り返して表示します。

no-repeat
背景画像を一回だけ表示してリピートはしません。

background-repeatの使用例

CSSファイル

.bgsp005 {
 width: 300px;
 height: 200px;
 background-image: url(images/backsample.gif);
 background-repeat: repeat-y;
 background-color: #ddffff;
}
.bgsp006 {
 width: 300px;
 height: 200px;
 background-image: url(images/backsample.gif);
 background-repeat: repeat-x;
 background-color: #ddffff;
}

HTMLソース

<p class="bgsp005">
background-repeatプロパティ使用例<br />
背景画像を縦位置のみ繰り返した例です。<br />
</p>

<p class="bgsp006">
background-repeatプロパティ使用例<br />
背景画像を横位置のみ繰り返した例です。<br />
</p>

表示すると

background-repeatプロパティ使用例
背景画像を縦位置のみ繰り返した例です。

background-repeatプロパティ使用例
背景画像を横位置のみ繰り返した例です。

背景関連項目

background 背景に関する指定をまとめて行う 
background-attachment 背景画像の固定・移動を指定する 
background-color 背景色を指定する 
background-image 背景画像を指定する 
background-position(x y) 背景画像の表示開始位置を指定する 
background-repeat 背景画像のリピートの仕方を指定する 

戻る

TOP

WEB SEARCH
MENU
CONTENTS
digilog.TOP
digilog.HTML
digilog.CSS
digilog.SEO
digilog.img