色・背景
「background-repeat」プロパティ
「background-repeat」プロパティは、要素の背景画像の並び方を指定するCSSプロパティです。
要素の背景画像の並び方を指定する値は、「敷き詰める」「水平方向に並べる」「垂直方向に並べる」「1つだけ表示する」などの指定ができます。
「background-repeat」プロパティの値
要素の背景画像の並び方を指定する値は「repeat」「repeat-x」「repeat-y」「no-repeat」などの値を指定することができます。
「repeat」は、縦横に背景画像を繰り返して表示し、「repeat-x」は、横方向にのみ背景画像を繰り返して表示し、「repeat-y」は、縦方向にのみ背景画像を繰り返して表示し、「no-repeat」は、背景画像を一回だけ表示して繰り返しを行わない指定をします。
また、「background-repeat」プロパティと同時に設定が出来るプロパティの種類がいくつかあります。
【プロパティの種類】
・background-color
・background-image
・background-size
・background-repeat
・background-position
・background-attachment
・background-clip
・background-origin
「background-repeat」プロパティの指定方法
要素の背景画像の並び方を指定する場合は、「background-repeat」プロパティを使い適応する値を指定することで実装できます。
「background-repeat」プロパティ
セレクタ{
background-repeat:要素の背景画像の並び方;
}値例
/* 基本値 */
background-repeat: repeat;/* 縦横に背景画像を繰り返して表示 */
background-repeat: repeat-x;/* 横方向にのみ背景画像を繰り返して表示 */
background-repeat: repeat-y;/* 縦方向にのみ背景画像を繰り返して表示 */
background-repeat: space;/* 画像サイズが表示領域の整数倍でない場合は、画像間にスペースを入れて調整 */
background-repeat: round;/* 画像サイズが表示領域の整数倍でない場合は、画像を拡大・縮小して調整 */
background-repeat: no-repeat;/* 背景画像を一回だけ表示して繰り返しを行わない */表示例
縦横に背景画像を繰り返して表示（repeat）
横方向にのみ背景画像を繰り返して表示（repeat-x）
縦方向にのみ背景画像を繰り返して表示（repeat-y）
背景画像を一回だけ表示して繰り返しを行わな（no-repeat）
