background-attachment プロパティ
background-attachment プロパティは、スクロールにおける背景画像の配置を指定する CSS プロパティです。
配置の指定は、背景画像もスクロールする scroll
、スクロールに関係なく固定する fixed
、設定エレメントのスクロールに合わせる local
が選べます。
background-attachment: fixed;
ページ内 Index
構文(Syntax)
background-attachment の構文です。
CSS
background-attachment: scroll | fixed | local ;
DOM ( JavaScript )
String=object.style.backgroundAttachment
object.style.backgroundAttachment=" scroll | fixed | local "
値(Values)
background-attachment に指定できる値です。
| Value | 摘要 |
|---|---|
| scroll | 初期値(default value)、スクロールする |
| fixed | スクロールに関係なくウィンドウ上に固定 |
| local | 設定エレメントのスクロールに合わせる |
以下のグローバル値も指定できます。
| キーワード値 | 機能 |
|---|---|
| initial | 仕様で決められた設定値 |
| inherit | 親エレメントの設定値を継承 |
| revert | ブラウザで設定された値 |
| unset | 継承値が優先される。値が継承値されるプロパティでは inherit に同じ。継承されない場合は revert に同じ |
指定値を固定化する場合は !important 宣言を加えます。
備考(Remarks)
background-attachment の備考です。
| 初期値(Default value) | scroll |
| 継承(Inherited) | no |
| 変化(Animatable) | no |
Example
background-attachment の表示例です。
background-attachment プロパティは、スクロールに対して背景を固定するか、否かを指定できます。
以下の例では固定、fixed値です。背景が固定され、スクロールに連動しません。
関連プロパティ
以下は関連するプロパティです。
| プロパティ名 | 概要 |
|---|---|
| background | バックグランドプロパティの一括指定 |
| background-attachment | スクロールによるバックグランドの表示位置 |
| background-blend-mode | 複数の背景画像や配色を混ぜ合わせる |
| background-clip | border、paddingを領域に含めるか |
| background-color | CSSのColorの指定 |
| background-image | 画像の挿入 |
| background-origin | 繰り返し表示を開始する位置 |
| background-position | 画像の配置位置 |
| background-repeat | 画像の繰り返し(デフォルトは繰り返し) |
| background-size | 画像のサイズ |
| linear-gradient() | 線形グラデーション |
| radial-gradient() | 円形グラデーション |
