The CSS Podcast - 053: Background
すべての CSS ボックスの背後には、背景レイヤと呼ばれる特殊なレイヤがあります。CSS には、複数の背景を許可するなど、有意な変更を加えるためのさまざまな方法が用意されています。
背景レイヤはユーザーから最も遠く、padding-box
領域から始まるボックスのコンテンツの背後にレンダリングされます。これにより、背景レイヤが境界と重ならないようにできます。
背景色
背景レイヤに適用できる最も簡単な効果の 1 つが色の設定です。background-color
の初期値は transparent
です。これにより、親のコンテンツを表示できます。背景レイヤに設定された有効な色は、その要素にペイントされた他の要素の背後に表示されます。
背景画像
background-color
レイヤの上に、background-image
プロパティを使用して背景画像を追加できます。background-image
は次を受け入れます。
url
CSS 関数を使用する画像 URL またはデータ URI。- グラデーションの CSS 関数によって動的に作成された画像。
url
CSS 関数を使用して background-image を設定する
CSS グラデーションの背景
2 つ以上の色を渡すと背景画像を生成できる、いくつかのグラデーション CSS 関数があります。
どのグラデーション関数を使用した場合でも、結果の画像は、使用可能なスペースの量に合わせて内部的にサイズ設定されます。
グラデーション関数を使用して背景画像を適用する例を示すデモ:
背景画像を繰り返す
デフォルトでは、背景画像は水平方向と垂直方向に繰り返され、背景レイヤのスペース全体が埋められます。
これを変更するには、background-repeat
プロパティに次のいずれかの値を使用します。
repeat
: 利用可能なスペース内で画像が繰り返され、必要に応じて切り抜かれます。round
: 画像が水平方向と垂直方向に繰り返され、利用可能なスペースにできるだけ多くのインスタンスが収まるようにします。使用可能なスペースが増えると画像が拡大され、画像の元の幅の半分まで拡大した後、画像インスタンスを追加するために圧縮されます。space
: 画像が水平方向と垂直方向に繰り返され、切り抜かずに使用可能なスペース内にできるだけ多くのインスタンスが収まるように配置されます。必要に応じて、画像のインスタンスの間隔が調整されます。繰り返される画像は、背景レイヤが占有するスペースの端に接し、画像間に均等に空白スペースが配置されます。
background-repeat
プロパティを使用すると、X 軸と Y 軸の動作を個別に設定できます。最初のパラメータは水平方向の繰り返し動作を設定し、2 番目のパラメータは垂直方向の繰り返し動作を設定します。
1 つの値を使用すると、その値は水平方向と垂直方向の両方の繰り返しに適用されます。
ショートカットには、意図を明確にするための便利な 1 語のオプションもあります。
値 repeat-x
は画像を水平方向にのみ繰り返します。これは repeat no-repeat
と同等です。
次のデモでは、background-repeat
プロパティのこれらの機能を示します。
背景の位置
ウェブ上の一部の画像が 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;
background-position: left right;
background-position
プロパティには、1 つの値のショートカットも用意されています。省略された値は 50%
に解決されます。background-position
プロパティが受け入れるキーワードを使用して、この例を説明します。
background-position
プロパティは、デフォルトの 2 つのパラメータ形式と 1 つのパラメータ形式に加えて、最大 4 つのパラメータも受け入れます。
3 つまたは 4 つのパラメータを使用する場合は、CSS の長さまたはパーセンテージの前に top
、left
、right
、bottom
のいずれかのキーワードを指定する必要があります。これにより、ブラウザは CSS ボックスのどのエッジからオフセットを開始するかを計算できます。
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 ボックスの上部(y 軸)からの 20% オフセットを表し、画像はボックスの左側に配置されます。
4 つのパラメータを使用する場合、2 つのキーワードは、指定された各キーワードのオリジンに対するオフセットに対応する 2 つの値とペアになります。background-position: bottom 20% right 30%
が background-image に適用されている場合、background-image は CSS ボックスの下部から 20%、右から 30% の位置に配置されます。
次のデモは、この動作を示しています。
CSS 値とキーワード値を組み合わせて background-position
プロパティを使用する例を次に示します。
背景サイズ
background-size
プロパティは背景画像のサイズを設定します。デフォルトでは、背景画像のサイズは、その固有の(実際の)幅、高さ、アスペクト比に基づいて設定されます。
background-size
プロパティでは、CSS の長さと割合の値、または特定のキーワードを使用します。このプロパティには、背景の幅と高さを個別に変更できるように、最大 2 つのパラメータを指定できます。
background-size
プロパティには、次のキーワードを使用できます。
auto
: 単独で使用する場合、背景画像は固有の幅と高さに基づいてサイズが設定されます。auto
が幅(最初のパラメータ)または高さ(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
と同様に、指定できるリージョンは、CSS 背景レイヤをレンダリングできる場所に対応する border-box
、padding-box
、content-box
です。これらのキーワードを使用すると、指定された領域より外側の背景のレンダリングは切り抜かれます。
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 の背景に関する知識をテストする
背景画像は CSS ボックスの左上に配置されます。
背景画像はデフォルトで繰り返されます。
次の background-position
宣言のうち、有効なものはどれですか。
background-position: top right 33%
background-position: 50% left
background-position: right bottom
background-position: left
ビューポート内に固定される背景画像を設定するには、次のコードを使用します。
background-attachment: fixed
background-position: fixed
background-fixed-to-viewport: true
background-attachment: scroll
CSS ボックス内の背景のデフォルトの background-origin は次のとおりです。
border-box
margin-box
content-box
padding-box