こんにちは！WEB担当のEです。
今回は、html、cssを使用し「スクロールしても背景画像を固定させたままにする方法」をお話したいと思います。
実際にどんな動きをするのかは、サンプルサイトの
「menu」と「contact」の部分を確認してみてください（*^ω^*）
今回は、上記の画像のように背景を指定して
その上に半透明なボックスを作ってみたいと思います。
htmlの記述は至ってシンプルです。
固定する背景画像を置くために、class名またはid名を指定します。
（今回はid名にしました）
そしてさらにその中に半透明の背景を指定するために、class名を記述していきます。
【html】
|
1 2 3 4 5 6 7 8 9 10 |
<div id="sample"> <div class="sample-box"> <p>サンプルテキスト</p> <p>サンプルテキスト</p> <p>サンプルテキスト</p> <p>サンプルテキスト</p> <br> <p>サンプルテキスト</p> </div> </div> |
【css】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
#sample { display:block; width:100%; height: 100%; background:url(../image/menu-bg.jpg); /*固定する背景画像*/ background-size:cover; /*背景画像のサイズを指定*/ background-attachment: fixed; /*背景画像を固定したままにするかしないか*/ text-align: center; } .sample-box { background:rgba( 0, 0, 0, 0.5 ); /*半透明なボックス*/ display:inline-block; padding: 20px; height: auto; width: 60%; margin: 30px auto; text-align: center; } .sample-box p { color: #fff; } |
background-attachmentプロパティは、スクロールしても背景画像を
固定させたままにするか、しないかの設定が可能です。
fixed：背景画像の位置が固定され、スクロールしても動かない。
scroll：スクロールに伴って、背景画像も移動する。
これで上記の画像またはサンプルページのように
スクロールしても背景画像を固定させたままにできたかと思います！
また、どんなファイルをhtml、cssファイルで読み込んでいるかは
《前回の記事》をご確認ください（^^）
_
タグ：css,html,スクロール,背景固定
2020.11.05