Title

background-attachmentとは

background-attachment とは次の語句からなるCSSのプロパティです。

background

読み: バックグラウンド
意味: 背景

attachment

読み: アタッチメント
意味: 取り付け

目次に戻る

background-attachmentプロパティの概要

このプロパティは、スクロールバーのあるページ、又はスクロールバーのある要素に背景画像を指定した場合に、 ビューポートの中に背景画像を固定するか、包含ブロックと一緒に画像をスクロールするかを指定できます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

セレクター{background-attachment: 設定値}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

ここでは、サンプルとしてdiv要素に背景画像を二つ重ねて指定しています。 また、テキストも含めていますのでスクロール時にテキストと画像の位置も確認できます。

初期値: scroll

初期値のscrollキーワードは、 背景画像を要素の相対位置で固定します。 要素自身がスクロール機構をもっている場合にも要素と背景画像の位置は常に固定されています。

div{background-attachment: scroll;}

目次に戻る

キーワード値: fixed

fixedキーワードは、 背景画像をビューポートからの相対位置で固定します。 要素がスクロール機構をもっていても、要素と共に背景画像はスクロールしません。 つまり、ビューポートからの固定なので、ページ全体のスクロールに合わせて画像がスクロールすることになります。

div{background-attachment: fixed;}

目次に戻る

キーワード値: local

localキーワードは、 背景画像を要素の内容からの相対位置で固定します。 つまり、テキスト等が要素内にある場合には、テキストと共に画像もスクロールします。

div{background-attachment: local;}

目次に戻る

グローバル値

background-attachmentプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値のscrollに戻します。
• unsetは継承の初期値に戻します。
  ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。

セレクター{background-attachment: グローバル値;}

目次に戻る

補足説明

• すべての要素に適用可能
• 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

background-attachment: scroll;

background-attachment: fixed;

background-attachment: local;

目次に戻る