Blog

HOME > Web > css > 【CSS】CSSで背景画像を固定させて別の要素をスクロールした時に背景画像を切り替える方法

【CSS】CSSで背景画像を固定させて別の要素をスクロールした時に背景画像を切り替える方法

2016/02/23

css

備忘録です。

参考サイト
CSSで背景画像を固定させて別の要素をスクロールした時に背景画像を切り替える

HTML
背景画像で使用する要素とスクロールさせる要素を交互に記述します。

<body>
	<div class="bg_fixed1"></div>
 
	<div class="scroll"></div>
 
	<div class="bg_fixed2"></div>
 
	<div class="scroll"></div>
</body>

CSS
背景画像を表示する要素の高さとそれぞれのbackgroundの設定をします。
「background-attachment: fixed;」を指定すると背景画像を固定させることができます。

.bg_fixed1 {
	height: 600px;
	background-image: url('sample1.jpg');
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	z-index: 1;
}
 
.bg_fixed2 {
	height: 600px;
	background-image: url('sample2.jpg');
	background-size: cover;
	background-attachment:fixed;
	background-repeat: no-repeat;
	background-position: center center;
	z-index: 1;
}
 
.scroll {
	height: 600px;
	background-color: #A8B8D5;
	z-index: 2;
}

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ