背景

CSS ポッドキャスト - 053: 背景

背景

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

バックグラウンド レイヤはユーザーから最も遠く、ボックスのコンテンツの背後にある padding-box 領域からレンダリングされます。こうすることで、バックグラウンド レイヤが境界線にまったく重ならなくなります。

背景色

バックグラウンド レイヤに適用できる最もシンプルな効果の 1 つは、color の設定です。background-color の初期値は transparent で、これにより親のコンテンツを表示できます。バックグラウンド レイヤで設定された有効な色は、その要素にペイントされた他の要素の背後に配置されます。

背景画像

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

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

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

CSS グラデーションの背景

グラデーション CSS 関数がいくつか用意されています。これらの関数を使用すると、2 色以上の色を渡したときに背景画像を生成できます。

どちらの勾配関数を使用する場合でも、結果として得られる画像のサイズは、利用可能なスペースの量に合わせて本質的にサイズ設定されます。

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

背景画像の繰り返し

デフォルトでは、背景画像は横方向と縦方向に繰り返して、バックグラウンド レイヤのスペース全体に表示されます。

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

• repeat: 利用可能なスペース内で画像が繰り返し表示されます。必要に応じて切り抜きが行われます。
• round: 使用可能なスペースにインスタンスができるだけ収まるように、画像が水平方向と垂直方向に繰り返されます。使用可能なスペースが増えると画像が拡大し、元の幅の半分に引き延ばされた後、画像インスタンスを追加するために圧縮されます。
• space: 利用可能なスペース内にできるだけ多く収まるように、画像を水平方向と垂直方向に繰り返します。切り抜かれることはなく、必要に応じて画像のインスタンスの間隔を空けます。繰り返し画像は、バックグラウンド レイヤが占める領域の端に接し、その間に余白を均等に分散します。

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

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

短縮形には、インテントを明確にするための便利な 1 語のオプションもあります。

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

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

背景の位置

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

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

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

CSS の長さとパーセンテージを使用する場合、1 つ目のパラメータは横軸に対応し、2 つ目のパラメータは縦軸に対応します。

キーワードのみを使用する場合、キーワードの順序は関係ありません。

background-position: left 50%;

background-position: top left;

background-position: left top;

  background-position: 50% left;

  background-position: left right;

また、background-position プロパティには、便利な値の省略形もあります。省略された値は 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;

background-position: bottom 88% right 33%;

background-position: right 33% bottom 88%;

background-position: 88% 33% bottom left;

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

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

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

次のデモでは、この動作を実証しています。

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

背景のサイズ

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 に適用する例:

バックグラウンドでの添付ファイル

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

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

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

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

バックグラウンド レイヤの画像のスペースを最初に画面外にスクロール（レンダリング）する必要が生じると、バックグラウンド レイヤ内の画像は、バックグラウンド レイヤが元の位置に固定されたまま、レイヤ全体がビューポートによって画面外にスクロールされるまで維持されます。

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

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

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

次のデモでこれらのオプションを試してください。

背景クリップ

background-clip プロパティは、background-origin プロパティによって作成された境界に関係なく、バックグラウンド レイヤから視覚的に表示されるものを制御します。

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

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

比較的新しいプロパティは、この記事の執筆時点では Chrome とほとんどのブラウザで、このプロパティを使用するために -webkit- プレフィックスが必要です。

複数の背景

モジュールの冒頭で説明したように、バックグラウンド レイヤで複数のサブレイヤを定義できます。ここでは、説明をわかりやすくするため、これらのサブレイヤを背景と呼びます。

上から下に複数の背景が定義されます。1 つ目の背景はユーザーに最も近い背景、最後の背景はユーザーから最も遠い背景になります。

定義されている唯一の背景、つまり最後のレイヤが、ブラウザによって「最終バックグラウンド レイヤ」として指定されます。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 背景に関する知識をテストする