Blog

【CSS】スクロールしても背景画像を固定させたままにする

こんにちは!WEB担当のEです。

今回は、html、cssを使用し「スクロールしても背景画像を固定させたままにする方法」をお話したいと思います。

 

 

実際にどんな動きをするのかは、サンプルサイト

「menu」と「contact」の部分を確認してみてください(*^ω^*)

 

今回は、上記の画像のように背景を指定して

その上に半透明なボックスを作ってみたいと思います。

 

htmlの記述は至ってシンプルです。

固定する背景画像を置くために、class名またはid名を指定します。

(今回はid名にしました)

そしてさらにその中に半透明の背景を指定するために、class名を記述していきます。

 

【html】

 

【css】

 

background-attachmentプロパティは、スクロールしても背景画像を

固定させたままにするか、しないかの設定が可能です。

 

fixed:背景画像の位置が固定され、スクロールしても動かない。

scroll:スクロールに伴って、背景画像も移動する。

 

これで上記の画像またはサンプルページのように

スクロールしても背景画像を固定させたままにできたかと思います!

 

また、どんなファイルをhtml、cssファイルで読み込んでいるかは

前回の記事》をご確認ください(^^)

 

 

 

_

タグ:css,html,スクロール,背景固定

2020.11.05