SYNCERのロゴ
アイキャッチ画像

background-attachment - スクロール時の背景画像の挙動

background-attachmentは、スクロール時の背景画像の挙動を制御するプロパティです。スクロールと一緒に画像が流れるのか、それとも固定されるのかを指定できます。

概要

名前
background-attachment
<attachment>#
<attachment> = scroll | fixed | local
初期値
scroll
適用対象
全ての要素。
継承
しない。
パーセンテージ
N/A
メディア
visual
計算値
as specified
アニメーションの可否
N/A
仕様書
https://drafts.csswg.org/css-backgrounds-3/#the-background-attachment

チュートリアル

<attachment>#

値は下記のリストから指定できます。複数の値を指定するにはコンマ(,)で区切って下さい。

scroll
初期値。スクロールに合わせて、背景画像も一緒に動く。
scroll
scroll
fixed
背景画像を固定する。スクロールをしても、背景画像が動かない。
fixed
fixed
local
ページ全体ではなく、要素内におけるスクロールを調整する。要素内のスクロールは通常、背景画像は固定状態(fixed)になる。そして、scrollを指定しても固定が解除されない。固定を解除するには、scrollではなく、localを指定する必要がある。
local
local
/* 単独のレイヤー */
background-image: url(image.png) ;
background-attachment: scroll ;

/* 複数のレイヤー */
background-image: url(image1.png),url(image2.png) ;
background-attachment: scroll,fixed ;
ページ全体要素内
scroll流動固定
fixed固定固定
local流動流動

デモ

ページ全体

fixedかscrollを指定してみて下さい。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
body {
	background-attachment: fixed ;	/* or scroll */
	background-image: url(./image.png) ;
	min-height: 350px ;
}
</style>
</head>
<body>
<script>
setTimeout( function () {
	document.body.style.height = "5000px" ;
}, 1000 ) ;
</script>
</body>
</html>

要素内

要素内スクロールの場合です。上がlocal、下がfixed(scrollでも同じ)です。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
div#hoge {
	background-attachment: local ;
}

div#fuga {
	background-attachment: fixed ;
}

div#hoge, div#fuga {
	background-image: url(./image.png) ;
	height: 250px ;
	border: 1px solid #000 ;
	margin: 10px 25px ;
	overflow: scroll ;
}

p#dummy {
	height: 3000px ;
}
</style>
</head>
<body>
<p>local</p>
<div id="hoge">
	<p id="dummy"></p>
</div>

<p>fixed、scroll</p>
<div id="fuga">
	<p id="dummy"></p>
</div>
</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月31日 (火)
コンテンツを公開しました。