1. CSSで背景画像を繰り返すとは？

CSS（シーエスエス）では、背景画像を指定することで、ウェブページの背景に画像を表示させることができます。背景画像は、デフォルトでは縦にも横にも自動的に繰り返される（リピート）設定になっています。

これは「同じ画像を何回もコピーして貼り付ける」イメージです。たとえば小さな模様の画像を背景に使うときに、ページ全体にその模様が敷き詰められるようになります。

2. background-repeatプロパティとは？

background-repeat（バックグラウンド・リピート）は、背景画像がどのように繰り返されるかを指定するためのCSSプロパティです。

このプロパティにはいくつかの指定方法があります。

repeat：縦にも横にも繰り返します（初期設定）。
no-repeat：繰り返しなし。画像は一回だけ表示されます。
repeat-x：横方向にだけ繰り返します。
repeat-y：縦方向にだけ繰り返します。

3. repeat-xとrepeat-yの違いを理解しよう

repeat-xを使うと、画像が横方向（X軸）にだけ繰り返されます。縦には繰り返されません。

一方、repeat-yを使うと、画像が縦方向（Y軸）にだけ繰り返されます。横には繰り返されません。

このようにすることで、たとえば「横に広がるライン状の画像」を使って、ページの上部に装飾を入れることが簡単にできます。

4. 実際にコードで使ってみよう！

ここでは、小さなアイコン画像を背景に設定し、repeat-xとrepeat-yをそれぞれ使って、どう表示が変わるのかを見てみましょう。

横方向に繰り返す（repeat-x）


<style>
.box-x {
    width: 100%;
    height: 150px;
    background-image: url('https://www.w3schools.com/cssref/paper.gif');
    background-repeat: repeat-x;
    border: 2px solid #333;
}
</style>

<div class="box-x"></div>

ブラウザ表示

縦方向に繰り返す（repeat-y）


<style>
.box-y {
    width: 150px;
    height: 300px;
    background-image: url('https://www.w3schools.com/cssref/paper.gif');
    background-repeat: repeat-y;
    border: 2px solid #333;
}
</style>

<div class="box-y"></div>

ブラウザ表示