(35) 背景画像をスクロールさせない

(1) やりたいこと

ページ内の表示物が増えると、画面をスクロールさせることになる。
このときに、表示物はスクロールさせても、背景画像はスクロールさせずに固定表示させたい。

(2) 実現方法

出来上がったサンプルはこちら。
https://hp.dogrow.net/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>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です