CSS - background-attachment

トップ > CSSリファレンス > background-attachment

概要

属性名 background-attachment
<attachment>[, <attachment>]*
値の詳細 <attachment> = scroll | fixed | local
初期値scroll
適用可能要素すべての要素
継承継承しない
メディアvisual
アニメーション不可

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
基本CSS14.01.01.03.51.0
複数背景CSS39.03.61.010.51.3
localCSS39.0251.011.55.0

説明

画面のスクロールバーに追従して、背景画像もスクロールさせるか否かを指定します。

説明
scroll背景は要素自身に固定され、コンテンツがスクロールしても背景はスクロールしません。
fixed背景は表示域に固定され、スクロールバーと共にスクロールします。
local背景はコンテンツに固定され、コンテンツと共にスクロールします。

使用例

CSS
.test {
  background-image: url(./image/back.gif);
  width: 100px;
  height: 100px;
  overflow: scroll;
  border: 1px solid gray;
}
.test-scroll {
  background-attachment: scroll;
}
.test-fixed {
  background-attachment: fixed;
}
.test-local {
  background-attachment: local;
}
HTML
<h5>scroll</h5>
<div class="test test-scroll">
あいうえお<br>
かきくけこ<br>
さしすせそ<br>
たちつてと<br>
なにぬねの<br>
はひふへほ<br>
まみむめも<br>
やゆよ<br>
わをん<br>
</div>
<h5>fixed</h5>
<div class="test test-fixed">
あいうえお<br>
かきくけこ<br>
さしすせそ<br>
たちつてと<br>
なにぬねの<br>
はひふへほ<br>
まみむめも<br>
やゆよ<br>
わをん<br>
</div>
<h5>local</h5>
<div class="test test-local">
あいうえお<br>
かきくけこ<br>
さしすせそ<br>
たちつてと<br>
なにぬねの<br>
はひふへほ<br>
まみむめも<br>
やゆよ<br>
わをん<br>
</div>
表示
scroll
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
はひふへほ
まみむめも
やゆよ
わをん
fixed
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
はひふへほ
まみむめも
やゆよ
わをん
local
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
はひふへほ
まみむめも
やゆよ
わをん

関連項目

background, background-color, background-image, background-repeat, background-attachment, background-position, background-clip, background-origin, background-size

リンク


Copyright (C) 1997-2015 杜甫々
初版:1997年7月27日、最終更新:2015年11月29日
http://www.tohoho-web.com/css/prop/background-attachment.htm