概要
CSS プロパティ background-size は、背景画像の大きさを指定します。画像の固有比率を維持するために、画像のサイズは完全に、または一部分だけ制約を受けます。
background-size プロパティに値をセットした後にショートハンドプロパティ background を呼び出し、background-size に該当する値をセットしなかった場合、ショートハンドプロパティによって初期値にリセットされます。- 初期値
auto auto - 適用対象 全要素
- 継承 しない
- 相対値の基準 background の配置領域
- メディア
visual - 計算値 <長さ>については絶対値、それ以外はパーセント値
- アニメーションの可否 可
構文
形式構文: <bg-size>#
/* キーワードの構文 */ background-size: cover background-size: contain /* 1 値構文: 画像の幅を指定。高さは暗黙的に 'auto' になります */ background-size: 50% background-size: 3em background-size: 12px background-size: auto /* 2 値構文: 1つ目の値で画像の幅、2 つ目の値で高さを指定 */ background-size: 50% auto background-size: 3em 25% background-size: auto 6px background-size: auto auto /* 背景画像ごとに定義される複数背景用の値。カンマでわけて並べます */ background-size: auto, auto /* 次の値と混同しないでください： background-size: auto auto */ background-size: 50%, 25%, 25% background-size: 6px, auto, contain background-size: inherit
値
<length>- 背景画像をこの
<length> <percentage>background-origin値で決まる背景配置領域に対して、背景画像の割合がこの<割合>attachmentがfixedなら、背景配置領域は代わりにスクロールバーで覆われた領域（もしあれば）を含まないブラウザウィンドウ全体になります。負のパーセンテージは使えません。autoautoキーワードは背景画像を画像固有の比率が維持される方向に拡大縮小します。cover- このキーワードは、背景画像が背景配置領域と同じか大きな幅と高さを持つことが保証される範囲で、なるべく小さくすべきであることを示します。
contain- このキーワードは、背景画像が背景配置領域と同じか小さな幅と高さを持つことが保証される範囲で、なるべく大きくすべきであることを示します。
最適値の解釈は画像の固有の寸法（幅と高さ）および固有の比率（幅と高さの比）によって決まります。ビットマップ画像は常に固有の寸法と固有の比率を持ちます。ベクター画像は固有の寸法を持つ可能性があります（したがって固有の比率を持つはずです）。片方だけ寸法を持つか、まったく持たない可能性もあり、この場合はそれぞれ、固有の比率を持っている可能性、持っていない可能性があります。グラデーションは固有の寸法や比率を持たない画像として扱われます。
この挙動は Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5) で変わりました。これ以前には、グラデーションは固定寸法を持たず、背景配置領域と同じ固定比率を持った画像として扱われました。
-moz-element （実際はある要素にマッチします）を使う要素から生成される背景画像は、現在はその要素の寸法、もしくは要素が SVG であれば背景配置領域の寸法を持ち、相当する固有比率を持つ画像とみなされます。
背景画像の描画サイズが、次のようにして計算されます:
background-sizeの幅、高さがともに定義されていてautoでない:- 背景画像は指定サイズで描画されます。
background-sizeがcontainかcover:- 画像は固有比率を維持したまま内包ブロック内で最大のサイズで描画されるか、背景配置領域を覆うように描画されます。画像が固有比率を持たない場合背景配置領域のサイズで描画されます。
background-sizeがautoかauto auto:- 画像が幅と高さの両方の固有寸法を持っていれば、そのサイズで描画されます。固有寸法も固有比率もなければ、背景配置領域のサイズで描画されます。寸法を持たず比率を持っているなら、代わりに
containが指定されたときのように描画されます。画像が固有寸法を片方だけと固有比率を持つ場合には、その寸法と比率から決まるサイズで描画されます。画像が固有寸法を片方だけ持ち、固有比率を持たない場合はその固有寸法と、背景配置領域の固有比率を使って描画されます。 - background-size が
autoとauto以外: - 画像が固有比率を持っていれば指定寸法を使って描画し、他の寸法を指定寸法と固有比率から計算します。画像が固有比率を持たなければ、指定寸法をその寸法に使います。もう一つの寸法は、画像の固有寸法がもしあればそれを使います。そうした固有寸法がなければ、背景配置領域の該当の寸法を使います。
固有寸法や固有比率を持たないベクター画像の背景の大きさの調整は、すべてのブラウザで完全に実装はされていない点に注意してください。上述の挙動を当てにしないように気をつけてください。描画結果の違いが許容範囲であるかどうか、複数のブラウザ（特にFirefox 7 やそれ以前と、Firefox 8 かそれ以降）で確かめてください。
例
background-size: cover のデモ と background-size: contain のデモ は新しいウィンドウで開いて、背景配置領域の寸法が変わるときの contain と cover の挙動を確認してください。background-size の動作や他の background-* プロパティとの相互作用を見せる一連のデモ は、background-size を単独で、または他のプロパティと組み合わせて使う方法について、残りの議論をうまく扱っています。
注記
背景としてグラデーションを定義し、background-size をそれにあわせて定義した場合には、単独の auto を使うサイズを指定しないか、width 値だけを使って定義するのがよいでしょう（例えば background-size: 50%）。こういった場合のグラデーションの描画方法は Firefox 8 で変更され、現在のところ CSS3 の background-size 仕様 や CSS3 の Image Values gradient 仕様 に完全準拠した描画方式をすべて実装していない他ブラウザと、たいていは一致しません。
.bar {
width: 50px; height: 100px;
background-image: gradient(...);
/* NOT RECOMMENDED */
background-size: 25px;
background-size: 50%;
background-size: auto 50px;
background-size: auto 50%;
/* OKAY */
background-size: 25px 50px;
background-size: 50% 50%;
}
注意点として、Firefox のバージョン 8 以前や、Firefox 8 の描画方式を実装していないブラウザでは、背景の指定された要素の正確なサイズがわからないと描画を折り返すことができないいので、pixel の寸法と auto 寸法をグラデーションで使うことは著しく推奨されません。
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| CSS Backgrounds and Borders Module Level 3 | 勧告候補 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) | ||
|---|---|---|---|---|---|---|---|
| 基本サポート | 1.0-webkit [2] | 3.6 (1.9.2)-moz [4] | 9.0 [5] | 9.5-o いくつかバグがあります [1] |
3.0 (522)-webkit しかし古い CSS3 草案からの実装です [2] |
||
| 3.0 | 4.0 (2.0) | 10.0 | 4.1 (532) | ||||
contain と cover のサポート |
3.0 | 3.6 (1.9.2) | 9.0 [5] | 10.0 | 4.1 (532) | ||
| SVG backgrounds のサポート | ? | 8.0 (8.0) | ? | ? | ? | ||
| 機能 | Android | Firefox Mobile (Gecko) | Windows Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | (有)-webkit 2.3 |
? | ? | ? | ? |
| SVG backgrounds のサポート | ? | 8.0 (8.0) | ? | ? | ? |
[1] Opera 9.5 の背景配置領域の計算は固定された背景に対して不正確でした。また、Opera 9.5 は 2-値 形式を水平方向のスケール率と解釈し、これは垂直方向のクリッピング寸法と解釈しているように見えました。これは Opera 10 で修正されました。
[2] WebKit ベースのブラウザは初め、2 つめの値を省略すると 1 つ目と同じ値を充てる、CSS3 background-size の古い草案を実装しました。この草案にはキーワード contain や cover はありませんでした。
[3] Konqueror 3.5.4 は -khtml-background-size をサポートしています。
[4] このプロパティは Gecko 1.9.2 (Firefox 3.6) で新たに登場しましたが、Firefox 3.5 では -moz-border-image を使って画像を背景全体に延ばすことができます。
.foo {
background-image: url(bg-image.png);
-webkit-background-size: 100% 100%; /* Safari 3.0 */
-moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%; /* Opera 9.5 */
background-size: 100% 100%; /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
-moz-border-image: url(bg-image.png) 0; /* Gecko 1.9.1 (Firefox 3.5) */
}
[5] Internet Explorer 8 は background-size プロパティをサポートしませんが、非標準の -ms-filter 関数を使ってこの機能の一部をエミュレートできます:
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
これは値 cover をシミュレートします。
関連情報
- CSS リファレンス
- 背景関連 CSS プロパティ :
background、background-attachment、background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size - 複数の背景
- 背景画像の拡大縮小