HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

バックグラウンド アタッチメント

background-attachmentプロパティ

要素の背景画像に対し、スクロールされたときの表示設定を指定します。

  • 初期値

    scroll

  • 継承

    不可

  • 適用できる要素

    全要素

scroll

要素に対し背景画像を固定表示するため、要素内のスクロールには影響されません。ページ自体のスクロールに対しては要素と一緒に動きます。

CSSコード例

background-attachment: scroll;

表示例:

サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト


local

要素内のスクロール、およびページ自体のスクロールのどちらにも影響されます。

CSSコード例

background-attachment: local;

表示例:

サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト


fixed

ページ自体に固定表示します。そのため、要素内のスクロール、およびページ自体のスクロールのどちらにも影響されません。

CSSコード例

background-attachment: fixed;

表示例:

サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト
サンプルテキスト

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。