background-size

概要

CSS プロパティ background-size は、背景画像の大きさを指定します。画像の固有比率を維持するために、画像のサイズは完全に、または一部分だけ制約を受けます。

構文

形式構文: <bg-size>#
where 
<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

/* キーワードの構文 */
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 値で決まる背景配置領域に対して、背景画像の割合がこの <percentage> 値に一致するように拡大縮小します。背景配置領域は、デフォルトではボックスのコンテンツとパディングを含む領域です。この領域はコンテンツだけになることも、ボーダー、パディング、コンテンツを含む領域になることもあります。背景の attachment が fixed なら、背景配置領域は代わりにスクロールバーで覆われた領域（もしあれば）を含まないブラウザウィンドウ全体になります。負のパーセンテージは使えません。

auto

auto キーワードは背景画像を画像固有の比率が維持される方向に拡大縮小します。

cover

このキーワードは、背景画像が背景配置領域と同じか大きな幅と高さを持つことが保証される範囲で、なるべく小さくすべきであることを示します。

contain

このキーワードは、背景画像が背景配置領域と同じか小さな幅と高さを持つことが保証される範囲で、なるべく大きくすべきであることを示します。

最適値の解釈は画像の固有の寸法（幅と高さ）および固有の比率（幅と高さの比）によって決まります。ビットマップ画像は常に固有の寸法と固有の比率を持ちます。ベクター画像は固有の寸法を持つ可能性があります（したがって固有の比率を持つはずです）。片方だけ寸法を持つか、まったく持たない可能性もあり、この場合はそれぞれ、固有の比率を持っている可能性、持っていない可能性があります。グラデーションは固有の寸法や比率を持たない画像として扱われます。

-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 寸法をグラデーションで使うことは著しく推奨されません。

仕様

ブラウザ実装状況

[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 リファレンス
• 複数の背景
• 背景画像の拡大縮小