背景画像の大きさ
背景画像の大きさを変更するには、background-size
プロパティを使用します。
なお、このプロパティはgradient関数も適用されます。
【構文】
background-size:キーワード;
またはbackground-size:縦横幅の値;
またはbackground-size:横幅値 縦幅の値;
指定可能な値
値 | 説明 | 初期値 |
---|---|---|
auto | 自動的に算出(元の画像の大きさ) | ○ |
contain | 縦横比を保持し画像の最大幅に収まるようにする | - |
cover | 縦横比を保持し画像の最小幅に収まるようにする | - |
数値 + 単位 | 指定幅の大きさ | - |
サンプル
サンプルでは、background-repeatプロパティをno-repeatに設定しています。
auto
contain
cover
20px
20px 50px