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

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

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

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

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

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

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

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

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

（今回はid名にしました）

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

【html】

<div id="sample">
　<div class="sample-box">
　　<p>サンプルテキスト</p>
　　<p>サンプルテキスト</p>
　　<p>サンプルテキスト</p>
　　<p>サンプルテキスト</p>
　　<br>
　　<p>サンプルテキスト</p>
　</div>
</div>

　　<p>サンプルテキスト</p>

　　<br>

　　<p>サンプルテキスト</p>

　</div>

【css】

#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;
}

#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

Blog