「CSS」fixedでスクロールしても背景画像を固定する

2014年9月27日2022年3月15日

書式
background: url(./img/画像名) fixed;
urlの後にfixedを指定してスクロールしても背景画像は固定します。
デフォルトの場合、scrollでスクロールとともに背景画像も移動します。

使用例

<style>
  .cft {
    background: url(./img/sample.png) fixed;
  }
  div {
    width: 300px;
  }
</style>
<div class="cft">cft
<p>テスト文字</p>
</div>

結果
fixedを指定しているので画面をスクロールしても背景画像(sample.png)は移動しません。