CSS

【background-repeat】背景画像の繰り返し

みいと

background-repeatで背景画像の繰り返しを設定する

background-repeatプロパティを使用すると、背景画像の繰り返し表示の設定をすることができます。
値には下記のキーワードを1〜2個指定できます。

  • repeat-x
  • repeat-y
  • repeat
  • space
  • round
  • no-repeat

repeat-x

背景画像を横方向だけに隙間なく繰り返します。
この値は単独で使用する必要があります。

repeat-xは、このように横方向だけに繰り返し表示します。

repeat-xの例

repeat-y

背景画像を縦方向だけに隙間なく繰り返します。
この値は単独で使用する必要があります。

repeat-yは、このように縦方向だけに繰り返し表示します。

repeat-yの例

repeat

背景画像を隙間なく繰り返して表示します。
指定された値が一つの場合は縦横に繰り返します。
この値が、background-repeatプロパティの初期値になります。

repeatはこのように縦横に繰り返し表示します。

repeatの例

space

背景画像全体が表示されるように繰り返し表示します。
背景画像がピッタリ収まらない(画像の途中で切れてしまう)状態のときは、画像と画像の間にスペースが入ります。

spaceは、このように画像が途中で切れないように、スペースを入れながら繰り返し表示します。

spaceの例

round

背景画像全体が表示されるように繰り返し表示します。
背景画像がピッタリ収まらない(画像の途中で切れてしまう)状態のときは、画像を拡大・縮小してピッタリと収まるように調整されます。

roundは、このように画像が切れないように、拡大・縮小しながら繰り返し表示します。

roundの例

no-repeat

背景画像を繰り返さずに1つだけ表示します。

no-repeatは、このように画像を1つだけ表示します。

no-repeatの例

背景画像の繰り返しのまとめ

まとめ

  • background-repeatプロパティを使用すると、背景画像の繰り返しの設定することができる
  • 値にはキーワードを1〜2個指定できる

ABOUT ME
みいと
みいと
興味を持ったものをいろいろと勉強しています。
記事URLをコピーしました