CSS 背景重複：背景画像のタイル化方法をマスターする
解説
この記事では、水平方向と垂直方向に背景画像を繰り返す方法を制御する CSS の background-repeat プロパティについて詳しく解説します。
見出しと主な内容
1. background-repeat プロパティの概要
- 定義:
background-repeatプロパティは、背景画像を水平方向と垂直方向にどのように（そして繰り返すかどうか）を定義します。 - デフォルト値:
repeat - 適用対象: すべての要素
- 継承: なし
2. background-repeat プロパティ値
| 値 | 説明 |
|---|---|
repeat |
デフォルト値。背景画像は水平方向と垂直方向に繰り返しタイル化されます。 |
repeat-x |
背景画像は水平方向にのみ繰り返しタイル化されます。 |
repeat-y |
背景画像は垂直方向にのみ繰り返しタイル化されます。 |
no-repeat |
背景画像は繰り返しタイル化されず、一度だけ表示されます。 |
space |
背景画像は水平方向と垂直方向に繰り返しタイル化されますが、画像間に空白が追加され、背景領域全体が埋め尽くされます。 |
round |
背景画像は水平方向と垂直方向に繰り返しタイル化され、必要に応じて画像が拡大縮小され、背景領域全体が隙間なく埋め尽くされます。 |
3. 使用例
異なる background-repeat プロパティ値を使用して異なる背景効果を実現する方法を示すコード例を以下に示します。
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
.example {
height: 200px;
background-image: url("https://via.placeholder.com/100");
margin-bottom: 20px;
}
#repeat {
background-repeat: repeat;
}
#repeat-x {
background-repeat: repeat-x;
}
#repeat-y {
background-repeat: repeat-y;
}
#no-repeat {
background-repeat: no-repeat;
}
#space {
background-repeat: space;
}
#round {
background-repeat: round;
}
</style>
</head>
<body>
<div class="example" id="repeat"></div>
<div class="example" id="repeat-x"></div>
<div class="example" id="repeat-y"></div>
<div class="example" id="no-repeat"></div>
<div class="example" id="space"></div>
<div class="example" id="round"></div>
</body>
</html>
4. 注意事項
spaceとroundを使用すると、画像の元のサイズが変更される可能性があります。background-repeatプロパティは、background-sizeやbackground-positionプロパティと組み合わせて使用して、より正確な背景制御を実現できます。
関連 QA
Q1: background-repeat プロパティを使用せずに背景画像を繰り返さないようにするにはどうすればよいですか？
A1: background-repeat プロパティを使用する代わりに、十分に大きい画像を使用するか、CSS の background-size: cover プロパティを使用して、画像が常に背景領域全体を覆うようにすることができます。
Q2: background-repeat プロパティを使用して、斜めに繰り返される背景画像を作成できますか？
A2: いいえ、background-repeat プロパティでは、水平方向または垂直方向にのみ繰り返すことができます。斜めの繰り返しパターンを作成するには、CSS グラデーションや SVG パターンなどの他のテクニックを検討する必要があります。
Q3: background-repeat プロパティと background-size プロパティをどのように組み合わせて使用できますか？
A3: background-repeat と background-size プロパティを組み合わせて使用すると、背景画像のサイズと繰り返しの動作をより詳細に制御できます。たとえば、background-size: contain を使用して画像のアスペクト比を維持しながら背景領域全体を覆い、background-repeat: repeat-x を使用して画像を水平方向にのみ繰り返すことができます。