【CSS Modules】background-repeatプロパティの使い方
background-repeatプロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
background-repeatプロパティは、要素の背景画像がどのように繰り返されるかに関する設定値を保持するプロパティです。このプロパティは、指定された背景画像を一度だけ表示するか、特定の方向に繰り返して表示するか、あるいは要素の背景領域全体を埋めるように繰り返して表示するかを制御します。
主な値としては、以下のものが利用可能です。
repeatは、背景画像を水平方向と垂直方向の両方に繰り返し表示し、要素の背景領域全体を埋めます。これがデフォルトの動作です。
repeat-xは、背景画像を水平方向（X軸）にのみ繰り返し表示し、垂直方向には繰り返しません。
repeat-yは、背景画像を垂直方向（Y軸）にのみ繰り返し表示し、水平方向には繰り返しません。
no-repeatは、背景画像を繰り返さず、一度だけ表示します。画像は通常、background-positionプロパティで指定された位置に表示されます。
spaceは、背景画像を繰り返し表示しますが、画像が途中で途切れることなく収まるように、必要に応じて画像の間にスペースを均等に挿入します。
roundは、背景画像を繰り返し表示しますが、画像が途中で途切れることなく収まるように、必要に応じて画像を拡大・縮小して調整します。
これらの値は、単一で指定することも、水平方向と垂直方向の繰り返しを個別に指定するために二つの値を組み合わせて指定することも可能です。例えば、background-repeat: repeat-x no-repeat;と指定すると、背景画像は水平方向にのみ繰り返され、垂直方向には繰り返されません。このプロパティは、Webデザインにおいて背景の見た目を柔軟に調整するために非常に重要な役割を果たします。
構文(syntax)
1.element { 2 background-repeat: no-repeat; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません