画像をリピート（繰り返し表示）する方法
CSSの background-repeat を使うと、画像を繰り返し表示できます。
デフォルトでは、背景画像はタイル状に繰り返される仕様になっています。
background-repeat の基本
・画像を縦横に繰り返す（デフォルト）
・結果
st.tokyo.jpg がボックス全体に敷き詰められる。
繰り返しのバリエーション
・水平方向だけ（repeat-x）
・結果
画像が横方向にのみ繰り返される。
・垂直方向だけ(repeat-y)
・結果
画像が縦方向にのみ繰り返される。
・繰り返しなし（no-repeat)
・結果
画像を１回だけ表示。
画像のサイズを調整してリピート
・background-size で画像のサイズを調整
・結果
画像を小さくして細かく並べる。
background-size: contain; で自動調整
・結果
画像の全体が見えるようにリピート。
background-size: cover; で画面いっぱいに広げる
・結果
画像を拡大して、画面いっぱいに表示。
background-position で開始位置を調整
中央から繰り返す
・結果
画像の中央から繰り返しが始まる。
左上から繰り返す
・結果
左上から画像が並ぶ
background-attachment: fixed; で固定
スクロールしても背景を固定
・結果
背景がスクロールしても動かない。
まとめ
| プロパティ | 説明 |
| background-repeat: repeat; | 縦横に繰り返し（デフォルト） |
| background-repeat: repeat-x; | 横方向に繰り返し |
| background-repeat: repeat-y; | 縦方向に繰り返し |
| background-repeat: no-repeat; | 繰り返しなし（1回だけ表示） |
| background-size: 50px 50px; | 画像サイズを指定 |
| background-position: center; | 繰り返しの開始位置を変更 |
コメント