HTMLとCSSが分かりやすく学べるサイト

  1. ホーム
  2. HTML・CSS
  3. 応用60. 背景画像のサイズ変更のプロパティ(background-size)

応用60. 背景画像のサイズ変更のプロパティ(background-size)

  1. 公開日:2017年02月01日
  2. 最終更新日:2022年08月10日

HTML・CSS

この記事をシェアする:

background-sizeとは

背景画像(background-image)のサイズの変更ができるCSS3で追加されたプロパティです。
※ベンダープレフィックスは不要。
※Internet Explorer9以上から対応。

background-sizeの各ブラウザの対応状況
Can I use -CSS3 Background-image options-

background-sizeの注意点

img要素と違い、background-imageはサイズ指定をしても要素の幅、高さを変えることはできません。
background-sizeを使用する場合は要素の幅、高さを指定してから行います。
また、背景画像を元のサイズより大きく指定すると、画像がボケて表示されます。
元のサイズ以上のサイズを指定しないほうがいいでしょう。

指定できるサイズの値(自動設定)

サイズの指定は、キーワードまたは数値で指定ができます。
下記は元画像の原寸サイズです。

背景画像のオリジナルサイズ

contain

要素の幅、高さの小さいサイズを基準に背景画像が収まるように縦横比率を固定して変形します。
結果、余白が出る場合があります。

background-size:contain


<div class="box"></div>


.box{
  width: 500px;
  height: 200px;
  border: 1px solid #333;
  background-image: url(../image/coffee.jpg);
  background-size: contain;
}

cover

要素の幅、高さの大きいサイズを基準に、背景画像が収まるように、縦横比率を固定して変形します。
結果、背景画像がはみ出して収まらない場合があります。

bacground-size:cover


.box{
  width: 500px;
  height: 200px;
  border: 1px solid #333;
  background-image: url(../image/coffee.jpg);
  background-size: cover;
}

指定できるサイズの値(手動)

任意の幅、高さでサイズ指定もできます。
その場合は幅、高さのどちらかにautoを指定しておくと比率を自動調整してくれます。
指定は、幅、高さの順に指定し、半角スペースで区切ります。
単位は、主にpx, %で指定します。

background-size:100px auto


.box{
  width: 500px;
  height: 200px;
  border: 1px solid #333;
  background-image: url(../image/coffee.jpg);
  /* 幅100px、高さ自動 */
  background-size: 100px auto;
}

幅、高さどちらもサイズ指定した場合は、背景画像を自由に引き延ばすこともできます。

background-size:80px 150px


.box{
  width: 500px;
  height: 200px;
  border: 1px solid #333;
  background-image: url(../image/coffee.jpg);
  /* 幅100px、高さ150px */
  background-size: 80px 150px;
}

まとめ

  • background-sizeはbackground-imageのサイズを変更できる
  • 自動調整の値は、contain(縮小)とcover(拡大)
  • 手動設定の場合は、幅、高さの順に半角スペースで区切って指定