【background-color / background-image】背景色と背景画像の設定
みいと
おじさんのWEBデザイン学習まとめ
【background-repeat】背景画像の繰り返し
みいと
background-repeatで背景画像の繰り返しを設定する
background-repeatプロパティを使用すると、背景画像の繰り返し表示の設定をすることができます。
値には下記のキーワードを1〜2個指定できます。
- repeat-x
- repeat-y
- repeat
- space
- round
- no-repeat
repeat-x
背景画像を横方向だけに隙間なく繰り返します。
この値は単独で使用する必要があります。
repeat-xは、このように横方向だけに繰り返し表示します。
repeat-y
背景画像を縦方向だけに隙間なく繰り返します。
この値は単独で使用する必要があります。
repeat-yは、このように縦方向だけに繰り返し表示します。
repeat
背景画像を隙間なく繰り返して表示します。
指定された値が一つの場合は縦横に繰り返します。
この値が、background-repeatプロパティの初期値になります。
repeatはこのように縦横に繰り返し表示します。
space
背景画像全体が表示されるように繰り返し表示します。
背景画像がピッタリ収まらない(画像の途中で切れてしまう)状態のときは、画像と画像の間にスペースが入ります。
spaceは、このように画像が途中で切れないように、スペースを入れながら繰り返し表示します。
round
背景画像全体が表示されるように繰り返し表示します。
背景画像がピッタリ収まらない(画像の途中で切れてしまう)状態のときは、画像を拡大・縮小してピッタリと収まるように調整されます。
roundは、このように画像が切れないように、拡大・縮小しながら繰り返し表示します。
no-repeat
背景画像を繰り返さずに1つだけ表示します。
no-repeatは、このように画像を1つだけ表示します。
背景画像の繰り返しのまとめ
まとめ
- background-repeatプロパティを使用すると、背景画像の繰り返しの設定することができる
- 値にはキーワードを1〜2個指定できる
ABOUT ME
興味を持ったものをいろいろと勉強しています。
