#仕様から抜粋して翻訳
##グラデーションが描画される範囲
グラデーションはグラデーションボックス (gradient box) と呼ばれる具体的なオブジェクトサイズ (concrete object size) の寸法内に描画される。しかし、グラデーション自体は内在的な寸法 (intrinsic dimensions) を持っていない。
グラデーションが背景に使用されるとき、初期状態でグラデーションが描画されるグラデーションボックスは要素のパディングボックスになる。
もし background-size が 100px 200px のように明示されているなら、グラデーションボックスは 100px の幅と 200px の高さになるだろう。
同様に、グラデーションが list-style-image に使用されるとき、グラデーションボックスはそのプロパティの初期オブジェクトサイズ (default object size) である 1em の正方形になるだろう。
http://www.w3.org/TR/2012/CR-css3-images-20120417/#gradients
##内在的な寸法 (intrinsic dimensions)
内在的な寸法とは、内在的な幅、内在的な高さ、そして内在的なアスペクト比 (その比は幅と高さの比である) のことで、指定されたオブジェクトにそれぞれ存在するかもしれないし、しないかもしれない。
これらの内在的な寸法はオブジェクト自体の望ましい、または自然なサイズを表す。すなわち、それらはオブジェクトが使用されるコンテキストの機能ではない。
CSS は内在的な寸法が一般的にどのように見つけられるかを定義しない。
ラスター画像は3つの内在的な寸法 (幅、高さ、アスペクト比) を持つオブジェクトの例である。
拡大縮小されるように作られた SVG 画像は、おそらく内在的なアスペクト比だけを持つだろう。また、SVG 画像は内在的な幅または高さのみを持つように作られることもある。
この仕様 (CSS Image Values and Replaced Content Module Level 3) で定義されている CSS グラデーションは、そもそも内在的な寸法を持っていないオブジェクトの一例である。もう一方の例として、HTML での <iframe> 要素のような埋め込みドキュメントがある。
オブジェクトは2つの内在的な寸法のみを持つことはできない。たとえば2つの寸法から自動的に3つ目を定義するといったもの。
(アイコンなどのように複数のサイズを持つオブジェクトについての説明は省略する。原文参照のこと)
http://www.w3.org/TR/2012/CR-css3-images-20120417/#intrinsic-dimensions
##指定サイズ (specified size)
指定オブジェクトサイズとは、width や height または background-size プロパティなど、CSS から与えられるものである。
指定サイズは明確な幅と高さ、制約のセット、またはその組み合わせとなる。
http://www.w3.org/TR/2012/CR-css3-images-20120417/#specified-size
##具体的なオブジェクトサイズ (concrete object size)
具体的なオブジェクトサイズとは、オブジェクトを使用するコンテキストにおける初期オブジェクトサイズでのオブジェクトの内在的な寸法と指定サイズを組み合わせた結果であり、明確な幅と高さを持つ矩形を作り出す。
http://www.w3.org/TR/2012/CR-css3-images-20120417/#concrete-object-size
##初期オブジェクトサイズ (default object size)
初期オブジェクトサイズとは、内在的な寸法と指定サイズの両方が存在しないとき、具体的なオブジェクトサイズを決定するのに使用される明確な幅と高さを持つ矩形である。
http://www.w3.org/TR/2012/CR-css3-images-20120417/#default-object-size
#簡単にまとめると
そもそも CSS グラデーションはそれ自体が寸法を持っていないので、そのままではオブジェクトとしてのサイズが存在しない。
そういう場合には初期オブジェクトサイズによって具体的なオブジェクトサイズが決定されるので、具体的なオブジェクトサイズと同義であるグラデーションボックスは使用される状況の初期オブジェクトサイズとなる。
しかしながら、background-size や width, height といったプロパティにより明示的にサイズが指定されている場合は、その指定に従ったグラデーションボックスとなる。
#グラデーションが背景として使用されるときサイズはどのように決定されるか
まず、具体的なオブジェクトサイズ (つまりグラデーションボックス) がどのように決定されるかを知る必要がある。
これは CSS Image Values and Replaced Content Module Level 3 の 5.3.1. Default Sizing Algorithm に記載されている。
http://www.w3.org/TR/2012/CR-css3-images-20120417/#default-sizing
このアルゴリズムは次のように定義される。
- 指定サイズが明確な幅と高さである場合、具体的なオブジェクトサイズには幅と高さが付与される。
- 指定サイズが幅または高さ (両方ではない) のみの場合、具体的なオブジェクトサイズには幅または高さが付与される。他の寸法は次のように決定される。
- オブジェクトが内在的なアスペクト比を持つ場合、具体的なオブジェクトサイズの足りない寸法は内在的なアスペクト比と与えられた寸法を仕様して計算される。
- そうでなければ、足りない寸法がオブジェクトの内在的な寸法により与えられる場合、足りない寸法はオブジェクトの内在的な寸法から取得される。
- そうでなければ、具体的なオブジェクトサイズの足りない寸法は初期オブジェクトサイズから取得される。
- 指定サイズが制約を持たない場合
- オブジェクトが内在的な幅または高さを持つ場合、その内在的なサイズが指定サイズとして指定されているかのように解決される。
- そうでなければ、初期オブジェクトサイズに対するコンテイン制約 (contain constraint) として解決される。
まず、背景画像として使われるグラデーションに指定サイズを指定するには background-size プロパティで指定できる。background-size に長さまたはパーセンテージの2つ値を指定した合は1つ目のアルゴリズムが使用される。1つ目の値が幅、2つ目の値が高さである。
background-size に1つの長さもしくはパーセンテージのみを指定した場合、その値は幅として扱われ、未指定の高さには初期値である auto が指定される。この auto は2つ目のアルゴリズムにより計算される。
グラデーションには内在的な寸法は存在しないので、2つ目のアルゴリズムのうち、3番目の項目に当たる。従って auto の値は初期オブジェクトサイズの高さとなる。
この値は 100% となると背景の仕様には書かれているが、なぜそうなるのかは後述する。
background-size が全くの未指定である場合、その値は auto auto である。この場合、background-size は3つ目のアルゴリズムにより計算される。
内在的な寸法を持たないグラデーションは3つ目のアルゴリズムのうち、2番目の項目に当たる。つまりコンテイン制約である。
#カバー並びにコンテイン制約サイジング
コンテイン制約とカバー制約の2つの共通指定サイズは、どちらもオブジェクトの内在的なアスペクト比を使用する指定された制約矩形に対して解決される。
- コンテイン制約とは、オブジェクトの内在的な寸法を持ち、加えて、それぞれ制約矩形の幅と高さよりも大きな幅も高さも持たない最大の矩形に具体的なオブジェクトサイズを設定することにより解決される。
- カバー制約とは、オブジェクトの内在的な寸法を持ち、加えて、それぞれ制約矩形の幅と高さよりも小さな幅も高さも持たない最小の矩形に具体的なオブジェクトサイズを設定することにより解決される。
どちらの場合でも、オブジェクトが内在的なアスペクト比を持たない場合、具体的なオブジェクトサイズは指定された制約矩形である。
http://www.w3.org/TR/2012/CR-css3-images-20120417/#cover-contain
background-size が指定されていない、背景として使用されるグラデーションはコンテイン制約であり、内在的なアスペクト比も持たないので、その具体的なオブジェクトサイズは背景として指定される要素の初期オブジェクトサイズと等しくなる。
#background-image の初期オブジェクトサイズ
background-image の初期オブジェクトサイズは、CSS 2.1 と CSS Backgrounds and Borders Module Level 3 により定義される。
CSS 2.1 において、指定サイズなしでデフォルトサイジングアルゴリズムを使用し、初期オブジェクトサイズとして背景配置領域を使用する。
CSS 3 において、background-size プロパティはデフォルトサイジングアルゴリズムまたはカバーもしくはコンテイン制約のどちらか一方のいずれかを呼び出すことでサイジング制約を付与できる。background-repeat の値が round である場合は、具体的なオブジェクトサイズは更に後の段階で調整される。
http://www.w3.org/TR/2012/CR-css3-images-20120417/#object-sizing-examples
background-image の初期オブジェクトサイズが背景配置領域であることから、background-size による指定のない、背景として使用されるグラデーションの大きさは背景配置領域と等しいものであることが分かった。
背景配置領域は background-origin によって指定が可能である。そしてその初期値は padding-box であるので、background-origin による背景配置領域の指定がない要素へ適用される background-size による制約がないグラデーションのグラデーションボックスは padding-box となる。
また、background-size に1つの値のみを指定したグラデーションの高さであるが、前述した通り、これは初期オブジェクトサイズの高さである。
background-size のパーセンテージ値は背景配置領域に対するパーセンテージであるので、初期オブジェクトサイズの高さと背景配置領域の高さ、そして background-size で指定される 100% の高さは等しくなる。
#まとめ
- 背景に使用されるグラデーションは background-size による指定がない限りは、背景配置領域に対して最大の大きさとなる。
- background-size による指定がある場合はそれに従った大きさとなるが、background-size のパーセンテージは背景配置領域に対するものなので、それを忘れないように。
- 背景配置領域は background-origin で領域を指定可能である。