HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

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

      2017/07/11

background-sizeとは

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

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

background-sizeの注意点

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

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

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

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

contain

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

background-size:contain

cover

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

bacground-size:cover

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

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

background-size:100px auto

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

background-size:80px 150px

まとめ

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

 - HTML・CSS