サイトマップ
トップページ > CSS > プロパティ一覧 > background > background-repeat(最終修正日:2007-03-06)

background-repeatプロパティ

background-repeatプロパティの概要
機能 背景画像の配置方法を定義
指定可能な値 repeat, repeat-x, repeat-y, no-repeat
初期値 no-repeat
継承 しない
適用可能なボックス 全て

background-repeatプロパティは、要素の背景画像の配置方法を定義します。background、あるいは、background-imageプロパティが定義されている要素でなければ、このプロパティを使用しても意味はありません。指定できる値には、次のようなものがあります。

指定できる値
no-repeat タイル状に配置しない(1度だけ表示)
repeat-x 横方向(x軸方向)のみ繰り返す
repeat-y 縦方向(y軸方向)のみ繰り返す
repeat タイル状に配置する(デフォルト)

no-repeat

画像をタイル状に配置したくない場合には、no-repeatを指定します。no-repeatを指定すると、要素の左上に画像が1度だけ表示されます。

入力例に使用した画像

入力例に使用した画像

body {
    background-image: url( images/back.gif );
    background-repeat: no-repeat;
}

確認画面

repeat-x

repeat-xを指定すると、要素の左上から横方向(x軸方向)のみに画像が繰り返して表示されます。


body {
    background-image: url( images/back.gif );
    background-repeat: repeat-x;
}

確認画面

repeat-y

repeat-yを指定すると、要素の左上から縦方向(y軸方向)のみに画像が繰り返して表示されます。


body {
    background-image: url( images/back.gif );
    background-repeat: repeat-y;
}

確認画面

repeat

repeatを指定すると、何も指定していないときと同様に画像がタイル状に繰り返して表示されます。既に、no-repeat等で繰り返し表示をさせないように設定していて、デフォルトであるタイル状に配置させたい場合に使用します。


body {
    background-image: url( images/back.gif );
    background-repeat: repeat-y;
    background-repeat: repeat;
}

確認画面
前ページbackground-image 上へこのページの先頭 background-position次ページ
Copyleft copyLeft 2009 W-D-L.NET