background-repeatの使い方
background-repeatは、背景の繰り返し方法を設定するときに使われます。
background-repeatプロパティの値の設定方法
| repeat（初期値） | 背景画像を左右上下に繰り返し表示します |
| no-repeat | 背景画像を繰り返し表示しないように指定 |
| repeat-x | 背景画像を左右に繰り返し表示します |
| repeat-y | 背景画像を上下に繰り返し表示します |
| round | 領域に合わせて、画像が途中で切れないよう画像サイズを調整して表示します |
| space | 領域に合わせて、画像と画像の間にスペースをあけて繰り返し表示します |
表だけではわかりづらいと思うので、以下のデモをご覧ください。
See the Pen xxOZKgW by ryu (@ryu-no-sss) on CodePen.
『repeat』と『round』『space』の違い
初期値の『repeat』の場合、画像が途中で見切れているのに対して、
『round』『space』は、画像が途中で見切れないように調整しているのがわかります。
これが、『repeat』と『round』『space』の違いです。
画像が途中で見切れてほしくない場合は、『round』や『space』を使うようにしましょう。
まとめ
・画像が途中で見切れてほしくない場合は、『round』や『space』を使う
それでは、最後まで読んでいただきありがとうございました。
タグ
