Background repeat-y

CSS `background-repeat-y` 属性详解

この記事では、CSS の `background-repeat-y` 属性について詳しく解説していきます。背景画像を垂直方向にどのように繰り返すかを制御するこの属性の役割、構文、値、そして実際のプロジェクトでの使用方法を学びましょう。

1. `background-repeat-y` 属性とは？

`background-repeat-y` 属性は、要素の背景画像が垂直方向にどのように繰り返されるかを制御します。

`background-repeat` との関係

`background-repeat-y` は、`background-repeat` 属性の簡略形です。 `background-repeat` は、水平方向と垂直方向の両方の繰り返しを一度に制御できますが、 `background-repeat-y` を使用すると、垂直方向の繰り返しのみを個別に制御できます。

2. `background-repeat-y` 属性の構文と値

構文


background-repeat-y: repeat | space | round | no-repeat;

値

値	説明
`repeat`	背景画像は、垂直方向にタイル状に繰り返し表示されます。これがデフォルト値です。
`space`	背景画像は、垂直方向に繰り返し表示され、画像間に可能な限り均等なスペースが配置されます。残りのスペースが完全な画像を収容するのに十分でない場合は、画像はクリッピングされます。
`round`	背景画像は、垂直方向に繰り返し表示され、必要に応じて画像が拡大縮小されるため、画像の一部が表示されなくなります。
`no-repeat`	背景画像は、垂直方向に繰り返されず、1 回だけ表示されます。

3. `background-repeat-y` の使用シーン

垂直方向のストライプ背景の作成: `background-repeat-y` を `repeat` に設定し、細いストライプ画像を使用することで、簡単に垂直方向のストライプ背景を作成できます。
背景画像の繰り返しの制御: 背景画像を垂直方向にのみ繰り返したい場合は、`background-repeat-y` 属性を使用することで、水平方向の不要な繰り返しを避けることができます。
他の背景属性との組み合わせ: `background-repeat-y` は、`background-image`、`background-size`、`background-position` などの他の背景属性と組み合わせて使用することで、より複雑で洗練された背景効果を作成することができます。

4. サンプル


.example {
  background-image: url("your-image.png");
  background-repeat-y: repeat; /* 垂直方向に繰り返す */
  background-repeat-x: no-repeat; /* 水平方向には繰り返さない */
}

5. まとめ

`background-repeat-y` は、背景画像の垂直方向の繰り返しを制御する非常に便利な CSS 属性です。この属性を使用することで、様々な視覚効果を簡単に作成することができます。

よくある質問

Q: `background-repeat-y` と `background-repeat` の違いは何ですか？
A: `background-repeat` は、水平方向と垂直方向の両方の繰り返しを一度に制御できますが、 `background-repeat-y` は、垂直方向の繰り返しのみを個別に制御できます。
Q: `background-repeat-y: space` と `background-repeat-y: round` の違いは何ですか？
A: `space` は画像間に均等なスペースを配置しますが、`round` は画像を拡大縮小してスペースを埋めようとします。
Q: `background-repeat-y` はすべてのブラウザでサポートされていますか？
A: はい、`background-repeat-y` は、すべての主要なブラウザでサポートされています。ただし、古いブラウザの中にはサポートしていないものもあるかもしれません。

その他の参考記事:CSS 背景プロパティ