2022-08-27

CSS: background-attachment 背景画像を固定・移動する

css で背景画像をブラウザの表示領域に固定するか、文書内容とともにスクロールさせるかを 指定するには、background-attachment プロパティを使用します。

「scroll」を指定すると文書内容とともに背景画像がスクロール（移動）し、 「fixed」を指定するとブラウザの表示領域に背景画像が固定されます。 初期値は「scroll」です。

background-attachment　プロパティの使用例

background-attachment: scroll;
background-attachment: fixed;

背景画像を固定するサンプルコード

右端に背景画像としてニワトリの絵を指定しています。
background-attachment: fixed;を指定しているので、
スクロールしても画像は移動せずに固定されています。

<style>
    body {
        background-image: url("../img/tori.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: right 200px;
    }
</style>