【CSS】backgroundプロパティ　背景画像の設定について

前回は要素の背景に色や画像を設定する方法について解説しました。今回も引き続き背景の設定について書いていきます。

Content

背景画像を固定する：background-attachmentプロパティ

background-attachmentプロパティを使用することで背景を固定するかスクロールするかの設定が可能です。設定できる値は以下の通りです。

値	解説
background-attachment: scroll;	初期状態。要素自体に背景が固定される。
background-attachment: fixed;	ウインドウに背景が固定される。
background-attachment: local;	要素内のコンテンツに背景が固定される。

「fixed」を指定すると背景が完全に固定されて動きませんが、「scroll」、「local」のいずれかの設定では条件によって背景もスクロールされます。1つずつ詳しく見ていきます。

背景画像は要素自体に固定されます。要素内のコンテンツのみがスクロールされた場合には背景は動きません。

要素が配置されているウインドウ自体がスクロールされた場合には要素がスクロールされるのに合わせて背景も動きます。

背景画像はウインドウに固定されます。要素内のコンテンツのみがスクロールされた場合に背景画像が動かないのは「scroll」を指定した場合と同じですが、「fixed」を指定するとウインドウがスクロールされて要素自体がスクロールされた場合でも背景は固定されて動きません。

背景画像は要素内のコンテンツに固定されます。したがって要素内のコンテンツがスクロールされた場合でも、ウインドウがスクロールされて要素自体がスクロールされた場合でも、スクロールに合わせて背景も動きます。

背景色や背景画像を設定した場合、通常はコンテンツ、パディング、境界を含めた領域に背景が設定されます。background-clipプロパティを指定することで背景が設定される範囲を変更することができます。設定できる値は以下の通りです。

値	解説
background-clip: border-box;	背景がコンテンツ、パディング、境界を含めた領域に設定されます。
background-clip: padding-box;	背景がコンテンツとパディングを含めた領域に設定されます。
background-clip: content-box;	背景がコンテンツの部分のみの領域に設定されます。
background-clip: text;	背景が要素内の文字に沿って切り取られるように設定されます。

背景が境界を含んだ領域に設定されます。したがって下の例のように境界の下まで背景が拡大されます。

See the Pen
background-clip -1 by そーたろう (@soh-files)
on CodePen.

背景がパディングまでの領域に設定されます。したがって下の例のようにコンテンツとパディングには背景が設定されますが、境界の下には背景はありません。

See the Pen
background-clip -2 by そーたろう (@soh-files)
on CodePen.

背景がコンテンツの部分のみに設定されます。したがって下の例のように境界やパディングの部分には背景はありません。

See the Pen
background-clip -3 by そーたろう (@soh-files)
on CodePen.

背景がコンテンツの文字を切り取るように設定されます。下の例では文字色は半透明の黒色に設定されていますが、文字によって切り取られた水色の背景が透けて、文字色が水色に設定されているように見えます。

See the Pen
background-clip -4 by そーたろう (@soh-files)
on CodePen.

今回は背景画像の固定と背景が設定される範囲の変更方法について解説しました。前回の背景色、背景画像の設定と合わせて、背景のアレンジができるようになると思うのでいろいろ試してみてください。

背景の設定についてあと1つ記事を書こうと思っています。次で最後になるはずなのでぜひご覧ください。