「CSS」fixedでスクロールしても背景画像を固定する
書式
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>
<style>
.cft {
background: url(./img/sample.png) fixed;
}
div {
width: 300px;
}
</style>
<div class="cft">cft
<p>テスト文字</p>
</div>
<style>
.cft {
background: url(./img/sample.png) fixed;
}
div {
width: 300px;
}
</style>
<div class="cft">cft
<p>テスト文字</p>
</div>
結果
fixedを指定しているので画面をスクロールしても背景画像(sample.png)は移動しません。