備忘録的プログラミングリファレンス

background-repeatプロパティ

 background-repeatプロパティは、背景画像の繰り返し方法を指定するプロパティです。
 背景画像を繰り返し表示させないようにするにはこのプロパティを使用します。

背景を繰り返さない(Exampleを参照
background-image: url('img/example.png');
background-repeat: no-repeat;

 背景画像の設定はbackgroundプロパティbackground-imageプロパティで指定します。

 背景画像は、デフォルトでは繰り返し表示されます。

関連プロパティ

 以下は関連するプロパティです。

プロパティ名概要
backgroundバックグランドプロパティの一括指定
background-attachmentスクロールによるバックグランドの表示位置
background-blend-mode複数の背景画像や配色を混ぜ合わせる
background-clipborder、paddingを領域に含めるか
background-colorCSSのColorの指定
background-image画像の挿入
background-origin繰り返し表示を開始する位置
background-position画像の配置位置
background-size画像のサイズ
linear-gradient()線形グラデーション
radial-gradient()円形グラデーション

構文(Syntax)

CSS

background-repeat: repeat | repeat-x | repeat-y | no-repeat;

DOM(JavaScript)

値の取得
String=object.style.backgroundRepeat;
値の設定
object.style.backgroundRepeat="_value_";

値(Values)

Value摘要
repeat初期値(default value)。横にも縦にも繰り返し表示。
repeat-x横方向の繰り返し表示。
repeat-y縦方向の繰り返し表示。
no-repeat繰り返し表示なし。1度だけ表示。
initial初期値に戻す。
inherit親エレメントのプロパティを継承。

備考(Remarks)

初期値(Default value)repeat
継承(Inherited)no
変化(Animatable)no

Example

 background-repeatの表示例です。ここではX軸方向に繰り返し表示しています。