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>



HTML・CSS入門