background-attachment

バックグラウンドアタッチメント（背景）

意味背景画像のスクロール

background-attachmentとは？

background-attachmentプロパティは、要素の背景画像がコンテンツのスクロールに対してどのように動作するかを指定します。主に'scroll'、'fixed'、'local'の3つの値があります。

background-attachmentの具体的な使い方

背景画像を固定する例

<style>
    body {
        background-image: url('https://picsum.photos/100/100');
        background-attachment: fixed;
    }
</style>

<body>
    この<body>要素の背景画像はスクロールしても動きません。
</body>

ページの<body>要素に設定された背景画像が、ページをスクロールしても動かないように固定されます。

background-attachmentに関するよくある質問

Q. background-attachmentの値は？

A. 主な値は、scroll（デフォルト）、fixed、localの3つです。scrollはビューポートに対して固定、fixedは画面に対して固定、localは要素のコンテンツに対して固定されます。

Q. fixedとscrollの違いは？

A. fixedは背景画像が画面に対して固定され、ページをスクロールしても動きません。scrollは背景画像がビューポートに対して固定され、要素自体がスクロールしても動きませんが、ページスクロールには追従します。

Q. localはどんな時に使う？

A. localは、スクロール可能な要素（例：overflow: scrollが設定された要素）内で背景画像をその要素のコンテンツに固定したい場合に使用します。要素内でスクロールすると、背景画像も一緒に動きます。

background-attachmentが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのbackground-attachmentやbackground-repeat、background-image、background-origin、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。