CSS Podcast - 053: 背景
背景
すべての CSS ボックスの背後には、バックグラウンド レイヤと呼ばれる専用のレイヤがあります。CSS には、複数の背景を許可するなど、さまざまな方法で意味のある変更を加えることができます。
背景レイヤはユーザーから最も遠く離れ、padding-box
領域を起点として、ボックスのコンテンツの背後にレンダリングされます。これにより、背景レイヤが境界線とまったく重ならないようになります。
背景色
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
背景レイヤに適用できる最も簡単な効果の 1 つは、色の設定です。background-color
の初期値は transparent
であり、これにより親のコンテンツを表示できます。背景レイヤに設定された有効な色は、その要素に描画された他の要素の背後に配置されます。
背景画像
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
background-color
レイヤの上に、background-image
プロパティを使用して背景画像を追加できます。background-image
は以下を受け入れます。
url
CSS 関数を使用した画像 URL またはデータ URI。- グラデーション CSS 関数によって動的に作成される画像。
url
CSS 関数を使用して背景画像を設定する
CSS グラデーション背景
2 つ以上の色が渡されたときに背景画像を生成できるグラデーション CSS 関数がいくつかあります。
使用するグラデーション関数に関係なく、生成される画像は利用可能なスペースに合わせて本質的なサイズが調整されます。
グラデーション関数を使用して背景画像を適用する例を示すデモ:
背景画像が繰り返されている
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
デフォルトでは、背景画像が水平方向と垂直方向に繰り返され、背景レイヤのスペース全体に表示されます。
これを変更するには、次のいずれかの値を持つ background-repeat
プロパティを使用します。
repeat
: 利用可能なスペース内で画像が繰り返し表示され、必要に応じて切り抜かれます。round
: 利用可能なスペースにできるだけ多くのインスタンスに収まるように、画像が水平方向と垂直方向に繰り返されます。利用可能なスペースが増えると画像が引き伸ばされ、元の画像の幅の半分が引き伸ばされた後、画像インスタンスを追加するために圧縮されます。space
: 利用可能なスペースにできるだけ多くのインスタンスに収まるように、画像が水平方向と垂直方向に繰り返されます。切り抜かれることなく、必要に応じて画像が配置されます。繰り返し表示される画像は、背景レイヤが占有するスペースの端に接触し、スペースが均等に分配されます。
background-repeat
プロパティを使用すると、x 軸と y 軸の動作を個別に設定できます。最初のパラメータで水平方向の繰り返し動作を設定し、2 番目のパラメータで垂直方向の繰り返し動作を設定します。
単一の値を使用すると、水平方向と垂直方向の両方の繰り返しに適用されます。
省略形には、意図をわかりやすくするために便利な 1 単語のオプションもあります。
値 repeat-x
は、画像を水平方向にのみ繰り返します。これは repeat no-repeat
と同等です。
次のデモは、background-repeat
プロパティのこれらの機能を示しています。
背景の位置
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <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;
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;
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%
を適用すると、背景画像は CSS ボックスの下部から 20%、右側から 30% の位置に配置されます。
次のデモでこの動作を示します。
CSS とキーワードの値を組み合わせて background-position
プロパティを使用するその他の例を次に示します。
背景のサイズ
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <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
に適用するデモ:
背景の添付ファイル
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
background-attachment
プロパティを使用すると、レイヤが画面に表示されたときに、背景画像(背景レイヤの一部の画像)の固定位置の動作を変更できます。
指定できるキーワードは scroll
、fixed
、local
の 3 つです。
background-attachment
プロパティのデフォルトの動作は、scroll
の初期値です。さらにスペースが必要な場合は、CSS ボックスの境界によって決定される背景レイヤ内で、そのスペースに合わせて画像が移動します。
値 fixed
を使用すると、背景画像の位置がビューポートに固定されます。
背景レイヤの画像のスペースが画面外にスクロール(またはレンダリング)する必要が生じたら、背景レイヤ内の画像は元の位置に固定され、ビューポートによってレイヤ全体が画面外にスクロールされるまで、背景レイヤによって有効になった位置に固定されます。
local
キーワードを使用すると、要素のコンテンツに対する背景画像の位置を固定できます。背景画像が、占有するスペースに沿って移動するようになりました。CSS ボックスの境界内外のスペースがレンダリングされるため、背景画像が(通常はスクロール、2D、または 3D 変換によって)表示されます。
バックグラウンド オリジン
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
background-origin
プロパティを使用すると、特定のボックスに関連付けられた背景の領域を変更できます。このプロパティが受け入れる値は、ボックスの border-box
、padding-box
、content-box
の各領域に対応します。
次のデモでこれらのオプションを試してみましょう。
背景クリップ
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
background-clip
プロパティは、background-origin
プロパティによって作成された境界に関係なく、背景レイヤから何が見えるかを制御します。
background-origin
と同様に、指定できる領域は border-box
、padding-box
、content-box
です。それぞれ CSS 背景レイヤをレンダリングできる場所に対応しています。これらのキーワードを使用すると、指定された領域よりも遠い背景のレンダリングが切り抜かれたか切り取られます。
background-clip
プロパティには、背景をコンテンツ ボックス内のテキスト以下に切り取る text
キーワードも指定できます。CSS ボックス内の実際のテキストでこの効果がはっきりと現れるようにするには、テキストを部分的または完全に透明にする必要があります。
比較的新しいプロパティです。このドキュメントの作成時点では、Chrome とほとんどのブラウザでこのプロパティを使用するには -webkit-
接頭辞が必要です。
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <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 ボックスの左上に配置されます。
背景画像は、デフォルトでは繰り返されません。
次の background-position
の宣言のうち、正しいものはどれですか。
background-position: top right 33%
background-position: right bottom
background-position: left
background-position: 50% left
使用するビューポート内の背景画像を固定するには:
background-attachment: fixed
background-position: fixed
background-fixed-to-viewport: true
background-attachment: scroll
CSS ボックス内の背景のデフォルトの background-origin は次のとおりです。
margin-box
content-box
border-box
padding-box