背景

background-size

background-size は背景画像を描く大きさを指定します。幅と高さを直接書くほか、cover と contain で要素に合わせて伸び縮みさせられます。

構文

<bg-size>#

<bg-size> = [ <length-percentage [0,∞]> | auto ]{1,2} | cover | contain

プリセット

見本

画像

右下の角をドラッグするとサイズを変えられます

.box {
  background-image: url(/sample.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
}

background-size50%

幅・高さを指定covercontain

width

height

cover は縦横比を保ったまま、要素をすき間なく覆う最小の大きさにします。はみ出した部分は切り取られます。
contain は縦横比を保ったまま、画像全体が収まる最大の大きさにします。余白ができ、background-repeat が初期値のままだと余白に画像がくり返されます。

1 つだけ書くと幅になり、高さは auto（縦横比を保つ）になります。2 つ書くと縦横比は崩れます。% は画像ではなく、背景を敷く領域（ふつうは padding までの範囲）に対する割合です。初期値は auto で、画像の元の大きさになります。

グラデーションには元の大きさがないので、auto だと領域いっぱいに描かれます。くり返し模様を作るときは大きさを指定しましょう。
background ショートハンドの中では、位置のあとに / を挟んで書きます（background: url(a.png) center / cover）。位置を省略して / cover だけを書くことはできません。
このページのプレビューでは、見本の画像を background-image と、くり返さない設定で敷いています。