1,149 views
この記事は最終更新から 2251日 が経過しています。
(1) やりたいこと
ページ内の表示物が増えると、画面をスクロールさせることになる。
このときに、表示物はスクロールさせても、背景画像はスクロールさせずに固定表示させたい。
(2) 実現方法
出来上がったサンプルはこちら。
https://www.dogrow.net/hp/sample/00035
index.html
「background-attachment: fixed;」で背景画像の表示位置を固定できる。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body.bg{
background: url(./img.jpg) no-repeat center;
background-size: cover;
background-attachment: fixed;
}
</style>
</head>
<body class="bg">
<p style="padding-bottom:500px;">あああああ</p>
<p style="padding-bottom:500px;">いいいいい</p>
<p style="padding-bottom:500px;">ううううう</p>
<p style="padding-bottom:500px;">えええええ</p>
<p style="padding-bottom:500px;">おおおおお</p>
</body>
</html>