background-size
は CSS のプロパティで、要素の背景画像の寸法を設定します。画像は自然な寸法になったり、引き伸ばされたり、利用可能な領域に収まるように縮小されたりします。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
背景画像に覆われていない領域は background-color
プロパティで埋められ、背景画像の後ろに見える背景色は透過性があります。
構文
/* キーワード値 */
background-size: cover;
background-size: contain;
/* 値1つの構文 */
/* 画像の幅 (高さは 'auto' になる) */
background-size: 50%;
background-size: 3.2em;
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; /* 'auto auto' と混同しないでください */
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;
/* グローバル値 */
background-size: inherit;
background-size: initial;
background-size: unset;
background-size
プロパティは以下のいずれか1つの方法で指定します。
contain
またはcover
のキーワード値を使用- 幅の値のみを使用、この場合の高さは既定の
auto
になります。 - 幅と高さの値の両方を使用、この場合は1番目の値で幅を、2番目の値で高さを設定します。どちらの値も
<length>
、<percentage>
またはauto
のいずれかになります。
複数の背景画像の寸法を指定するには、それぞれの値をカンマで区切ってください。
値
contain
- 画像を切り取ったり縦横比を崩したりすることなく、画像ができるだけ大きくなるよう拡大縮小します。
cover
- 画像の縦横比を崩すことなく、画像ができるだけ大きくなるよう拡大縮小します。画像の縦横比が要素と異なる場合、空き領域が残らないように上下または左右のどちらかを切り取ります。
auto
- 縦横比が維持されるように、適切な方向に背景画像を拡大縮小します。
<length>
- その軸が指定された長さになるよう画像を拡大縮小します。負の値は使用できません。
<percentage>
- その軸が背景配置領域の指定された割合になるよう拡大縮小します。背景配置領域とは、
background-origin
の値(既定ではパディングボックス)によって定められます。しかし、背景のbackground-attachment
の値がfixed
の場合、配置領域はビューポート全体となります。負の値は使用できません。
固有の軸と比率
値の計算は画像の固有の寸法 (幅と高さ) と固有の比率 (幅と高さの比率) に依存します。属性は以下の通りです。
- ビットマップ画像 (JPG など) には、常に固有の寸法と比率があります。
- ベクター画像 (SVG など) には固有の寸法がないことがあります。水平と垂直の両方に固有の寸法がある場合は、固有の比率もあります。固有の寸法がなかったり、一方しかなかったりする場合は、固有の比率がある場合もあるしない場合もあります。
- CSS の
<gradient>
には固有の寸法も固有の比率もありません。 element()
関数によって作成された背景画像では、それを作成する要素の固有の寸法と比率を使用します。
メモ: <gradient>
の振る舞いは Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5) で変更されました。それより前は、固有の寸法がないものの、背景配置領域と同じ比率の画像として扱われていました。
メモ: Gecko では、 element()
関数を使用して作成された背景画像は要素の寸法、または要素が SVG の場合は背景配置領域の寸法を持つ画像として扱われ、適切な固有の比率を持ちます。これは非標準の振る舞いです。
固有の寸法と比率に基づき、背景画像の描画寸法は以下のようにして計算されます。
background-size
の幅と高さがともに定義されていてauto
でない場合- 背景画像は指定の寸法で描画されます。
background-size
がcontain
またはcover
の場合- 固有の比率を維持するため、画像は背景配置領域の中に収まるか、背景配置領域を覆うように描画されます。画像が固有の比率を持たない場合は、背景配置領域の寸法で描画されます。
background-size
がauto
またはauto auto
の場合-
- 画像に水平および垂直の固有の寸法がある場合は、その寸法で描画されます。
- 画像に固有の寸法も固有の比率もない場合は、背景配置領域の寸法で描画されます。
- 画像に固有の寸法はない物の固有の比率がある場合は、
contain
が指定された場合のように描画されます。 - 画像に一方だけ固有の寸法があり、固有の比率がある場合は、一方の寸法に合わせて描画されます。もう一方の寸法は指定された寸法と固有の比率を使用して計算されます。
- 画像に一方だけ固有の寸法があり、固有の比率がない場合は、指定された寸法と、もう一方は背景配置領域の寸法を使用して描画されます。
-
メモ: SVG 画像には
preserveAspectRatio
属性があり、既定ではcontain
と同等です。 Firefox 43 では、 Chrome 52 とは対照的に、明確にbackground-size
が設定されるとpreserveAspectRatio
が無視されます。 background-size
の一方がauto
でもう一方がauto
ではない場合-
- 画像に固有の比率がある場合は、指定された寸法まで拡大縮小されます。指定されていない方の寸法は指定された寸法と固有の比率を使用して計算されます。
- 画像に固有の比率がない場合は、指定された寸法まで拡大縮小されます。指定されていない方の寸法は、画像の指定された寸法を使用して計算されます。そのような固有の寸法がない場合、背景配置領域の適切な寸法になります。
メモ: 固有の寸法や比率を持たないベクター画像の背景の拡大縮小は、まだすべてのブラウザーで完全に実装されているわけではありません。上記に記述した振る舞いに注意し、結果が適切であるかを複数のブラウザーで確認してください。
形式文法
<bg-size>#where
<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain
where
<length-percentage> = <length> | <percentage>
例
例については Scaling background images を参照してください。
メモ
背景としてグラデーションを定義し、background-size
をそれにあわせて定義した場合には、単独の auto を使うサイズを指定しないか、width 値だけを使って定義するのがよいでしょう (例えば background-size: 50%
)。こういった場合のグラデーションの描画方法は Firefox 8 で変更され、現在のところ CSS3 の background-size
仕様 や CSS3 の Image Values gradient 仕様 に完全準拠した描画方式をすべて実装していない他ブラウザと、たいていは一致しません。
.gradient-example {
width: 50px;
height: 100px;
background-image: linear-gradient(blue, red);
/* 利用が安全ではない */
background-size: 25px;
background-size: 50%;
background-size: auto 50px;
background-size: auto 50%;
/* 利用可能 */
background-size: 25px 50px;
background-size: 50% 50%;
}
なお、 <gradient>
に対してピクセルの寸法と auto
を利用することは推奨されません。 Firefox の 8 より前と、 Firefox 8 のレンダリングを実装していないブラウザーでは、背景が指定されている要素の正確な寸法が分からないと、レンダリングできないからです。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Backgrounds and Borders Module Level 3 background-size の定義 |
勧告候補 | 初回定義 |
初期値 | auto auto |
---|---|
適用対象 | すべての要素。 ::first-letter and ::first-line にも適用されます。 |
継承 | なし |
パーセンテージ | relative to the background positioning area |
計算値 | 指定通り。ただし相対的 length は絶対的 length に変換 |
アニメーションの種類 | repeatable list of simple list of length, percentage, or calc |
ブラウザーの互換性
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。