CSS | ページ全体で背景画像を固定する方法

2023-05-31CSS 背景,CSS

CSSでページ全体で背景画像をページスクロール時も固定表示にする方法とサンプルコードを紹介しています。

ページ全体で背景画像を固定する

ページ全体で背景画像を固定する動作サンプルとCSSサンプルコードになります。

See the Pen CSS movie subtitles animation by yochans (@yochans) on CodePen.

CSSでページ全体で背景画像を固定するには、body要素に対して「background-image」を指定する方法があります。

画像を指定したら「background-attachment: fixed」「background-position: center」「background-repeat: no-repeat」「background-size: cover」を指定し、繰り返しなしの固定表示に設計します。

body {
	background-image: url("background.jpg");
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}