概要
CSSのbackground-repeatプロパティは、要素の背景画像をどのように繰り返すかを制御するために使用されます。デフォルトでは、背景画像は要素全体に繰り返し表示されますが、background-repeatを使用することで、繰り返しのパターンを自由に調整できます。本記事では、background-repeatの基本的な使い方や設定可能な値、実践的な使用例について詳しく解説します。
background-repeatの基本構文
background-repeatプロパティの基本的な構文は以下のとおりです。
background-repeat: 値;
- 値には、繰り返し方を指定するキーワード（repeat, no-repeat, repeat-x, repeat-y, space, round）を使用します。
background-repeatの指定方法
repeat（デフォルト）
repeatは背景画像を水平および垂直方向に繰り返して表示します。特に指定がない場合、この設定がデフォルトで適用されます。
body {
background-image: url('pattern.png');
background-repeat: repeat; /* 背景画像を水平・垂直に繰り返す */
}
no-repeat
no-repeatは背景画像を繰り返さず、1回だけ表示します。背景画像を単一で表示させたいときに使用します。
body {
background-image: url('banner.jpg');
background-repeat: no-repeat; /* 背景画像を1回だけ表示 */
}
repeat-x
repeat-xは背景画像を水平（X軸）にのみ繰り返します。ヘッダーやフッターなど、横方向にだけ繰り返すデザインに適しています。
header {
background-image: url('stripe.png');
background-repeat: repeat-x; /* 背景画像を水平に繰り返す */
}
repeat-y
repeat-yは背景画像を垂直（Y軸）にのみ繰り返します。サイドバーや縦長のデザインに使われることが多い設定です。
aside {
background-image: url('vertical-pattern.png');
background-repeat: repeat-y; /* 背景画像を垂直に繰り返す */
}
space
spaceは背景画像を繰り返しながらも、隙間を均等に配置します。繰り返しの開始位置と終了位置が明確に分かり、画像の間に均等なスペースができるため、整然とした見た目になります。
body {
background-image: url('dots.png');
background-repeat: space; /* 画像を繰り返し、余白を均等に配置 */
}
round
roundは背景画像を繰り返しながら、余りを埋めるように画像のサイズを自動調整します。画像が自然に繰り返されるように見えるため、デザインに自然な流れを作り出せます。
body {
background-image: url('tiles.png');
background-repeat: round; /* 繰り返しながらサイズを調整 */
}
複数の背景画像とbackground-repeat
複数の背景画像を指定する際には、それぞれの画像に対して異なるbackground-repeatの設定を行うことが可能です。複数の値をカンマで区切って指定します。
body {
background-image: url('top-pattern.png'), url('bottom-pattern.png');
background-repeat: repeat-x, repeat-y; /* それぞれの画像に対して異なる繰り返し設定 */
}
background-repeatを使った実践例
背景画像を1回だけ表示して位置を調整する
ページのトップにバナー画像を1回だけ表示し、位置を中央に配置する例です。
header {
background-image: url('banner.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
背景パターンを整然と配置する
ドット柄の背景パターンを隙間なく整然と配置する例です。
body {
background-image: url('dots.png');
background-repeat: space;
background-size: auto;
}
background-repeatの注意点
- 画像のサイズと位置のバランスを考慮する
背景画像のサイズや配置とbackground-repeatの設定が合っていない場合、デザインが乱れて見えることがあります。デザイン全体の一貫性を保つように調整しましょう。 - 視認性を確保する
繰り返される背景画像がコンテンツの視認性を妨げることがあります。必要に応じて、背景色やbackground-blend-modeなどを活用して視認性を高めます。 - パフォーマンスに配慮する
高解像度の画像を多用すると、ページの読み込み速度に影響を与えることがあります。画像の最適化を行い、適切なサイズの画像を使用しましょう。
まとめ
background-repeatプロパティは、背景画像の繰り返し方法を柔軟に制御するための重要なCSSプロパティです。繰り返しのパターンを適切に設定することで、デザインに統一感を持たせたり、視覚的なリズムを作り出すことが可能です。また、他のプロパティ（background-position, background-size）と組み合わせることで、さらに洗練された背景デザインを実現できます。適切な設定を行い、ページ全体のデザインと調和する背景画像を演出しましょう。