生徒WEBページの背景が思うように固定できないです
先生CSSのbackground-attachmentで背景を固定する方法を説明します
WEBページの背景の固定について
WEBページをスクロールした時に、背景の位置を固定するか、背景も一緒にスクロールするかは、CSSのbackground-attachmentで指定できます。
この記事では、background-attachmentの各設定による動作の違いについて説明します。
- CSSのbackground-attachmentでWEBページの背景を固定する方法
background-attachmentの設定によって背景の見え方が変わる
background-attachmentプロパティは、背景画像をどこに固定するかを指定します。
背景をどこに固定するかによって、画面を移動した時の見え方が変わります。
background-attachmentのプロパティ
background-attachmentプロパティには以下の3つの設定があります。
| 設定 | 説明 |
|---|---|
| fixed | 背景をビューポートに固定する |
| scroll | 背景をページに固定する |
| local | 背景をページ内の要素に固定する |
ビューポイント、WEBページ、要素はそれぞれ以下の内容を指します。
| 名前 | 説明 |
|---|---|
| ビューポイント | ブラウザで表示している領域 |
| WEBページ | HTMLファイルの<body>から</body>の間の内容 |
| 要素 | WEBページ内に<div>などで記述されている要素 |
scrollはページに背景画像を固定する
background-attachment: scroll;は背景をページに固定します。
ページをスクロールしてページの表示位置が変わると、背景の表示位置も変わります。
| 動作 | 説明 | |
|---|---|---|
| 初期表示時 |  | 背景画像はページに対して固定されています。 |
| ページスクロール時 |  | ページに固定されているので表示位置を移動すると表示される背景が変わります。 |
| 要素スクロール時 |  | ページに固定されているので、ページの要素内でスクロールしても表示内容は変わりません。 |
See the Pen background-attachment: scroll; by mik20621 (@mik20621) on CodePen.
fixedはビューポートに背景画像を固定する
background-attachment: fixed;は背景をビューポイント（画面の表示領域）に固定します。
画面に背景の同じ位置が常に表示される動きになります。
| 動作 | 説明 | |
|---|---|---|
| 初期表示 |  | 背景画像は画面表示エリアに対して固定されています。 |
| ページスクロール時 |  | 画面表示エリアに固定されているので表示される内容は変わりません。 |
| 要素スクロール時 |  | 画面表示エリアに固定されているので表示される内容は変わりません。 |
See the Pen background-attachment: fixed; by mik20621 (@mik20621) on CodePen.
localは要素に背景画像を固定する
background-attachment: local;はページ内の要素に背景画像を固定します。
要素の表示位置と一緒に、表示される背景の位置が変わります。
| 動作 | 説明 | |
|---|---|---|
| 初期表示時 |  | 背景画像はページ内の要素に対して固定されています。 |
| ページスクロール時 |  | 要素に固定されているので、要素と一緒に移動します。 |
| 要素スクロール時 |  | 要素に固定されているので、要素内の位置が変わると画面に表示される内容が変わります。 |
See the Pen background-attachment: local; by mik20621 (@mik20621) on CodePen.