1,224 views
この記事は最終更新から 2552日 が経過しています。
(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>