背景画像の配置方法を設定するCSSプロパティ

CSS - background-attachment

background-attachment の概要

CSSプロパティ「background-attachement」は、背景画像がviewport によって固定されるか、スクロールするるかを設定できます。background-image で背景が設定されていない場合、この設定値は無視されます。

<p>下にスクロールしてください。背景がViewportに固定されています。</p>
<div class="box ahoy"></div>
<div class="box kitty"></div>
<div class="box plaid"></div>
<div class="box subway"></div>
<style>
.box{
  height:260px;
  background-attachment: fixed;
}
.box.ahoy{
  background-image: url(https://www-creators.com/wp-content/uploads/2017/10/ahoy.jpg);
}
.box.kitty{
  background-image: url(https://www-creators.com/wp-content/uploads/2017/10/kitty.png)
}
.box.plaid{
  background-image: url(https://www-creators.com/wp-content/uploads/2017/10/science.png)
}
.box.subway{
  background-image: url(https://www-creators.com/wp-content/uploads/2017/10/subway-lines.png)
}
</style>

値と解説

background-attachement の値は下記のキーワードで設定されます。

解説
fixed背景画像は、viewport に対して固定されます。もし背景を設定した要素がスクロールしても、背景画像がスクロールすることはありません。
local背景画像は、その要素に対して固定されます。もし要素のコンテンツがスクロールすれば、背景画像も共にスクロールします。背景の描画領域はスクロールするコンテンツ側に対して配置されます。
scroll背景画像は、要素自体に固定され、要素のコンテンツと共にスクロールすることはありません。

関連リンク

関連CSSプロパティ