背景

CSS Podcast - 053: 背景

背景

すべての CSS ボックスの背後には、バックグラウンド レイヤと呼ばれる専用のレイヤがあります。CSS には、複数の背景を許可するなど、さまざまな方法で意味のある変更を加えることができます。

背景レイヤはユーザーから最も遠く離れ、padding-box 領域を起点として、ボックスのコンテンツの背後にレンダリングされます。これにより、背景レイヤが境界線とまったく重ならないようになります。

背景色

対応ブラウザ

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 1. <ph type="x-smartling-placeholder">

ソース

背景レイヤに適用できる最も簡単な効果の 1 つは、色の設定です。background-color の初期値は transparent であり、これにより親のコンテンツを表示できます。背景レイヤに設定された有効な色は、その要素に描画された他の要素の背後に配置されます。

背景画像

対応ブラウザ

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 1. <ph type="x-smartling-placeholder">

ソース

background-color レイヤの上に、background-image プロパティを使用して背景画像を追加できます。background-image は以下を受け入れます。

  • url CSS 関数を使用した画像 URL またはデータ URI。
  • グラデーション CSS 関数によって動的に作成される画像。

url CSS 関数を使用して背景画像を設定する

CSS グラデーション背景

2 つ以上の色が渡されたときに背景画像を生成できるグラデーション CSS 関数がいくつかあります。

使用するグラデーション関数に関係なく、生成される画像は利用可能なスペースに合わせて本質的なサイズが調整されます。

グラデーション関数を使用して背景画像を適用する例を示すデモ:

背景画像が繰り返されている

対応ブラウザ

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 1. <ph type="x-smartling-placeholder">

ソース

デフォルトでは、背景画像が水平方向と垂直方向に繰り返され、背景レイヤのスペース全体に表示されます。

これを変更するには、次のいずれかの値を持つ background-repeat プロパティを使用します。

  • repeat: 利用可能なスペース内で画像が繰り返し表示され、必要に応じて切り抜かれます。
  • round: 利用可能なスペースにできるだけ多くのインスタンスに収まるように、画像が水平方向と垂直方向に繰り返されます。利用可能なスペースが増えると画像が引き伸ばされ、元の画像の幅の半分が引き伸ばされた後、画像インスタンスを追加するために圧縮されます。
  • space: 利用可能なスペースにできるだけ多くのインスタンスに収まるように、画像が水平方向と垂直方向に繰り返されます。切り抜かれることなく、必要に応じて画像が配置されます。繰り返し表示される画像は、背景レイヤが占有するスペースの端に接触し、スペースが均等に分配されます。

background-repeat プロパティを使用すると、x 軸と y 軸の動作を個別に設定できます。最初のパラメータで水平方向の繰り返し動作を設定し、2 番目のパラメータで垂直方向の繰り返し動作を設定します。

単一の値を使用すると、水平方向と垂直方向の両方の繰り返しに適用されます。

省略形には、意図をわかりやすくするために便利な 1 単語のオプションもあります。

値 repeat-x は、画像を水平方向にのみ繰り返します。これは repeat no-repeat と同等です。

次のデモは、background-repeat プロパティのこれらの機能を示しています。

背景の位置

対応ブラウザ

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 1. <ph type="x-smartling-placeholder">

ソース

ウェブ上の一部の画像が background-repeat: no-repeat 宣言でスタイル設定されている場合、そうした画像はコンテナの左上に表示されます。

背景画像の初期位置は左上です。background-position プロパティを使用すると、画像の位置をオフセットすることでこの動作を変更できます。

background-repeat と同様に、background-position プロパティを使用すると、デフォルトで 2 つの値を使用して、画像を x 軸と y 軸に沿って個別に配置できます。

CSS の長さと割合を使用する場合は、最初のパラメータを横軸に、2 番目のパラメータを縦軸にそれぞれ対応します。

キーワードを使用するだけの場合、キーワードの順序は重要ではありません。

すべきこと
background-position: left 50%;
すべきこと
background-position: top left;
すべきこと
background-position: left top;

異なる掲載順位の軸に関連付けられているキーワードの場合、順序は重要ではありません。
すべきでないこと
  background-position: 50% left;

CSS の値をキーワードとともに使用する場合は、順序が重要です。1 つ目の値は横軸、2 つ目の値は縦軸です。

すべきでないこと
  background-position: left right;

同じ軸に関連付けられているキーワードを同時に使用することはできません。

また、background-position プロパティには 1 つの便利な省略形があります。省略された値は 50% に解決されます。background-position プロパティに指定できるキーワードを使用した例を次に示します。

デフォルトの 2 つのパラメータ フォームと 1 つのパラメータ フォームに加えて、background-position プロパティにも最大 4 つのパラメータを指定できます。

3 つまたは 4 つのパラメータを使用する場合は、ブラウザが CSS ボックスのどの端からオフセットを取得するかを計算できるように、CSS の長さまたは割合の前に top、left、right、bottom のいずれかのキーワードを付ける必要があります。

3 つのパラメータを使用する場合は、CSS の長さまたは値を 2 番目または 3 番目のパラメータにして、他の 2 つはキーワードにします。成功したキーワードを使用して、オフセットに対応する CSS の長さまたは値が特定されます。指定された他のキーワードのオフセットは 0 に設定されます。

すべきこと
background-position: bottom 88% right;
すべきこと
background-position: right bottom 88%;
すべきでないこと
background-position: 88% bottom right;
<ph type="x-smartling-placeholder"></ph> 3 つ以上のパラメータを使用する場合は、CSS の長さの値の前に top、right、bottom、left のいずれかのキーワードを付ける必要があります。
すべきこと
background-position: bottom 88% right 33%;
すべきこと
background-position: right 33% bottom 88%;
すべきでないこと
background-position: 88% 33% bottom left;
<ph type="x-smartling-placeholder"></ph> 3 つ以上のパラメータを使用する場合は、CSS の長さの値の前に top、right、bottom、left のいずれかのキーワードを付ける必要があります。

background-position: top left 20% を CSS の背景画像に適用すると、画像はボックスの上部に配置されます。20% 値は、ボックスの左（x 軸）から 20% のオフセットを表します。

background-position: top 20% left を CSS の背景画像に適用した場合、20% という値は CSS ボックスの上部（Y 軸）からの 20% のオフセットとなり、画像はボックスの左側に配置されます。

4 つのパラメータが使用される場合、2 つのキーワードは、指定された各キーワードのオリジンに対するオフセットに対応する 2 つの値とペアになります。背景画像に background-position: bottom 20% right 30% を適用すると、背景画像は CSS ボックスの下部から 20%、右側から 30% の位置に配置されます。

次のデモでこの動作を示します。

CSS とキーワードの値を組み合わせて background-position プロパティを使用するその他の例を次に示します。

背景のサイズ

対応ブラウザ

  • Chrome: 3. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 4. <ph type="x-smartling-placeholder">
  • Safari: 5. <ph type="x-smartling-placeholder">

ソース

background-size プロパティは、背景画像のサイズを設定します。デフォルトでは、背景画像は本来備わっている（実際の）幅、高さ、アスペクト比に基づいてサイズ設定されます。

background-size プロパティでは、CSS の長さや割合の値、または特定のキーワードを使用します。このプロパティは、背景の幅と高さを個別に変更できるようにするためのパラメータを 2 つまで指定できます。

background-size プロパティには、次のキーワードを指定できます。

  • auto: 背景画像を単独で使用する場合、画像は固有の幅と高さに基づいて調整されます。auto を幅（1 つ目のパラメータ）または高さ（2 つ目のパラメータ）として別の CSS 値とともに使用すると、auto に設定されたディメンションのサイズは、画像の自然なアスペクト比が維持されるように、必要に応じて調整されます。これは background-size プロパティのデフォルトの動作です。
  • cover: 背景レイヤの全領域を覆います。画像が引き伸ばされたり、トリミングされたりしている可能性があります。
  • contain: 引き伸ばしたり切り抜いたりすることなく、スペースを埋めるように画像のサイズを調整します。その結果、background-repeat が no-repeat に設定されていない限り、空白スペースが残るため、画像が繰り返される可能性があります。

後者の 2 つは、他のパラメータなしで単独で使用することを想定しています。

次のデモで、これらのキーワードの実際の動作を示します。

これらのキーワードを background-size に適用するデモ:

背景の添付ファイル

対応ブラウザ

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 1. <ph type="x-smartling-placeholder">

ソース

background-attachment プロパティを使用すると、レイヤが画面に表示されたときに、背景画像（背景レイヤの一部の画像）の固定位置の動作を変更できます。

指定できるキーワードは scroll、fixed、local の 3 つです。

background-attachment プロパティのデフォルトの動作は、scroll の初期値です。さらにスペースが必要な場合は、CSS ボックスの境界によって決定される背景レイヤ内で、そのスペースに合わせて画像が移動します。

値 fixed を使用すると、背景画像の位置がビューポートに固定されます。

背景レイヤの画像のスペースが画面外にスクロール（またはレンダリング）する必要が生じたら、背景レイヤ内の画像は元の位置に固定され、ビューポートによってレイヤ全体が画面外にスクロールされるまで、背景レイヤによって有効になった位置に固定されます。

local キーワードを使用すると、要素のコンテンツに対する背景画像の位置を固定できます。背景画像が、占有するスペースに沿って移動するようになりました。CSS ボックスの境界内外のスペースがレンダリングされるため、背景画像が（通常はスクロール、2D、または 3D 変換によって）表示されます。

バックグラウンド オリジン

対応ブラウザ

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 4. <ph type="x-smartling-placeholder">
  • Safari: 3. <ph type="x-smartling-placeholder">

ソース

background-origin プロパティを使用すると、特定のボックスに関連付けられた背景の領域を変更できます。このプロパティが受け入れる値は、ボックスの border-box、padding-box、content-box の各領域に対応します。

次のデモでこれらのオプションを試してみましょう。

背景クリップ

対応ブラウザ

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 4. <ph type="x-smartling-placeholder">
  • Safari: 5. <ph type="x-smartling-placeholder">

ソース

background-clip プロパティは、background-origin プロパティによって作成された境界に関係なく、背景レイヤから何が見えるかを制御します。

background-origin と同様に、指定できる領域は border-box、padding-box、content-box です。それぞれ CSS 背景レイヤをレンダリングできる場所に対応しています。これらのキーワードを使用すると、指定された領域よりも遠い背景のレンダリングが切り抜かれたか切り取られます。

background-clip プロパティには、背景をコンテンツ ボックス内のテキスト以下に切り取る text キーワードも指定できます。CSS ボックス内の実際のテキストでこの効果がはっきりと現れるようにするには、テキストを部分的または完全に透明にする必要があります。

比較的新しいプロパティです。このドキュメントの作成時点では、Chrome とほとんどのブラウザでこのプロパティを使用するには -webkit- 接頭辞が必要です。

対応ブラウザ

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12。 <ph type="x-smartling-placeholder">
  • Firefox: 4. <ph type="x-smartling-placeholder">
  • Safari: 5. <ph type="x-smartling-placeholder">

ソース

で確認できます。

複数の背景

モジュールの冒頭で述べたように、バックグラウンド レイヤでは複数のサブレイヤを定義できます。簡潔にするために、これらのサブレイヤを背景と呼びます。

複数の背景は上から下に定義されます。最初の背景はユーザーに最も近いもので、最後の背景はユーザーから最も遠い背景です。

ブラウザでは、定義された唯一の背景または最後のレイヤが、最終的な背景レイヤとして指定されます。このレイヤのみが background-color を割り当てることができます。

以下のコード スニペットとライブデモに示すように、背景に関連するほとんどの CSS プロパティ（カンマ区切り）を使用して、複数のレイヤを個別に設定できます。

background-image: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png"),
    url("https://assets.codepen.io/7518/blob.svg"),
    linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
  background-size: contain, cover, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 50% 50%, 10% 50%, 0% 0%;
  background-origin: padding-box, border-box, content-box;

背景の略記

特に複数の背景レイヤが必要な場合に、ボックスの背景レイヤのスタイルを簡単に設定できるように、次の特定のパターンに沿った省略形があります。

background:
  <background-image>
  <background-position> / <background-size>?
  <background-repeat>
  <background-attachment>
  <background-origin>
  <background-clip>
  <background-color>?

複数の背景を宣言する簡潔な形式では、順序が重要です。位置とサイズの値は両方をスラッシュ（/）で区切って指定する必要があります。オリジンとクリップの動作を正しい順序で宣言すると、両方に対して同時に有効なキーワードを設定できます。

次の宣言により、背景がクリップされ、コンテンツ ボックスから取得されます。

background: url("https://assets.codepen.io/7518/blob.svg") 50%
      50% / contain no-repeat content-box;

このような簡略的なセマンティクスを念頭に置いて、これまでのコード スニペットの背景関連の宣言を次のように書き換えることができます。

background: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png") 50% 50%/contain no-repeat padding-box, url("https://assets.codepen.io/7518/blob.svg") 10% 50% / cover border-box, linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0% / cover no-repeat content-box ;

理解度をチェックする

CSS 背景に関する知識をテストする

背景画像は CSS ボックスの左上に配置されます。

正しい
正解です。
False
画像の本来のサイズによっては、CSS ボックスの左上隅に画像が配置されていないように見えることがあります。背景画像のデフォルトの位置を変更するには、background-position を明示的に使用する必要があります。

背景画像は、デフォルトでは繰り返されません。

False
背景画像を繰り返さないようにするには、background-repeat: no-repeat を明示的に使用する必要があります。さらに、background-repeat: repeat-x と background-repeat: repeat-y を使用して、特定の軸で繰り返し実行しないようにできます。
正しい
正解です。

次の background-position の宣言のうち、正しいものはどれですか。

background-position: 50% left
CSS 値をキーワードで使用する場合は、値の順序が重要です。
background-position: top right 33%
これにより、背景画像がボックスの最上部、ボックスの右端から 33% の位置に配置されます。
background-position: right bottom
これにより、背景画像がボックスの右端と下部に配置されます。異なる軸の位置には任意の順序で名前を付けることができます。
background-position: left
背景画像がボックスの左端に、垂直方向の中央に配置されます。1 つの軸の位置のみが指定されている場合、背景画像は反対の軸の中央に配置されます。

使用するビューポート内の背景画像を固定するには:

background-position: fixed
「これは background-position プロパティの値が無効です。」
background-fixed-to-viewport: true
background-fixed-to-viewport は CSS にまだ存在しません。
background-attachment: fixed
background-attachment: fixed は、現在のビューポート内で背景画像が固定されるように明示的に設定します。
background-attachment: scroll
background-attachment は、ビューポート内で固定する背景画像を設定するために使用するプロパティです。ただし scroll はプロパティのデフォルト値です。デフォルトでは、ボックス内のコンテンツの影響を受けないボックスに背景画像が固定されます。

CSS ボックス内の背景のデフォルトの background-origin は次のとおりです。

content-box
background-origin の有効な値ですが、デフォルトではありません。
border-box
background-origin で有効な値と、事前に配置された枠線を背景の上に描画できますが、デフォルトではありません。
padding-box
background-origin のデフォルト値。背景をコンテンツを超えてボックスの境界までレンダリングできるようにします。
margin-box
CSS ボックスの領域として認識されていますが、background-origin プロパティの値は無効です。