CSS - background-attachment
概要
| 属性名 |
background-attachment |
| 値 |
<attachment>[, <attachment>]* |
| 値の詳細 |
<attachment> = scroll | fixed | local |
| 初期値 | scroll |
|---|
| 適用可能要素 | すべての要素 |
|---|
| 継承 | 継承しない |
|---|
| メディア | visual |
|---|
| アニメーション | 不可 |
|---|
| CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
|---|
| 基本 | CSS1 | 4.0 | 1.0 | 1.0 | 3.5 | 1.0 |
| 複数背景 | CSS3 | 9.0 | 3.6 | 1.0 | 10.5 | 1.3 |
| local | CSS3 | 9.0 | 25 | 1.0 | 11.5 | 5.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
<h3>scroll</h3>
<div class="test test-scroll">
あいうえお<br>
かきくけこ<br>
さしすせそ<br>
たちつてと<br>
なにぬねの<br>
はひふへほ<br>
まみむめも<br>
やゆよ<br>
わをん<br>
</div>
<h3>fixed</h3>
<div class="test test-fixed">
あいうえお<br>
かきくけこ<br>
さしすせそ<br>
たちつてと<br>
なにぬねの<br>
はひふへほ<br>
まみむめも<br>
やゆよ<br>
わをん<br>
</div>
<h3>local</h3>
<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日
https://www.tohoho-web.com/css/prop/background-attachment.htm