background-size - 背景画像のサイズを指定する

投稿日:2016/02/22 / 更新日:2016/02/22

スタイルシートのbackground-sizeは、背景画像のサイズを指定するためのプロパティです。

サンプルコード

下記は、背景画像のサイズを横幅75px、高さ76pxに指定するサンプルコードです。

div {
	background-size: 75px 76px ;
}

デモ

スタイルシートのbackground-sizeを指定した例です。下の要素は何も指定していないため、画像のオリジナルサイズが背景画像として繰り返し表示されています。対して、上の要素は半分のサイズ(横幅75px、高さ76px)を指定したため、小さく表示されています。

RUN
HTML
CSS
JavaScript

#element-1 { background-size: 75px 76px ; } #element-1 , #element-2 { background-image: url( "/character-01.png" ) ; margin-top: 20px ; height: 200px ; }

値の指定

値の指定方法は主に下記の通りです。リンクをクリックすると、デモを確認できます。

項目	説明
inherit	親要素の値を引き継ぐ。例の場合、`div`要素の`background-size`には、`body`に指定された値(`75px 76px`)が引き継がれる。
initial	プロパティの初期値が適用される。この場合、`auto`(画像のオリジナルサイズ)となる。
auto	初期値。画像のオリジナルサイズが設定される。
cover	要素を埋め尽くすように拡大される。アスペクト比は保たれる。横幅、または高さのどちらかが最大になるように調整されるので、要素を超えてはみ出すことがある。
contain	横幅と高さの両方が収まる最大限のサイズになるようにリサイズされる。`cover`とは違って横幅、高さともにはみ出ない。絶対に1つは要素内に含まれる。
length	`px`や`vw`など、CSSで許された単位を使って、大きさを指定できる。1つだけを指定すれば、横幅がその値になって高さがそれに合わせてリサイズされます。つまりアスペクト比が保たれます。2つの値を指定すると、1つ目の値が横幅、2つ目の値が高さがとなり、アスペクト比が保たれる保証がありません。(単位の一覧)
percentage	パーセンテージで値を指定すると、要素の幅に対する割合でサイズが設定されます。例えば、`33.3%`の1つだけを指定すると、横幅に対して33.3%のサイズとなり、アスペクト比も保たれます。`33.3% 10%`というように2つの値を指定すると、横幅に対して33.3%、高さに対して10%のサイズとなります。アスペクト比が保たれる保証はありません。
multiple	`background-image`で複数の背景画像を指定した場合、その数に合わせて`background-size`の値も複数指定できます。複数指定する場合は、カンマ(`,`)で区切って下さい。この例では、キャラクターの画像を半分のサイズに、模様の画像を最大サイズ(`contain`)になるように指定しています。

ブラウザのサポート

2016年7月現在の、ブラウザのサポート状況は次の通りです。全ての主要ブラウザで、ベンダープレフィクスなど気にすることなく利用できます。

Chrome
●
-
時期不明
Firefox
●
-
時期不明
Safari
●
-
時期不明
Ie
●
-
時期不明
Edge
●
-
時期不明
Opera
●
-
時期不明
Safari(iOS)
●
-
時期不明
Ie Mobile
●
-
時期不明
Chrome
●
-
時期不明
Android
●
-
時期不明
FF Mobile
●
-
時期不明
Opera Mobile
●
-
時期不明