cman.jp > WEBページ作成TOP > CSSリファレンス > 「背景画像のスクロール」
WEBページ作成
広告
background-attachment 「背景画像の固定対象」
background-attachment プロパティは画面をスクロールしたときの背景画像の位置に関する設定を行うことができます。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 2.1 (※ 3.0で拡張) | 全て | しない |
広告
background-attachment の値
【構文】
background-attachment:[attachment];
| attachment [背景画像のスクロール指定] | |
|---|---|
| background: fixed; | 背景画像を固定 |
| background: scroll; | 背景画像を画面にあわせてスクロール(初期値) |
| background: local; | 背景画像を画面にあわせてスクロール。 子要素に対して指定した場合は子要素に対してもスクロール |
| background: inherit; | 親要素の値を継承 |
background-attachment のサンプル
※ サンプル使用画像
| bg-img2.png |
|---|
 |
1.背景画像のスクロール指定サンプル（スクロール）
<html>
<head>
<title>背景画像スクロール指定サンプル（スクロール）</title>
<style type="text/css">
<!--
/* 背景画像スクロール指定サンプル（scroll） */
body
{
background : url("./img/bg-img2.png") no-repeat right top;
background-attachment: scroll;
}
-->
</style>
</head>
<body>
<span style="font-size:12pt; " >画像スクロール指定サンプル（スクロール）</span>
<p>
01行目<br>
02行目<br>
03行目<br>
04行目<br>
05行目<br>
06行目<br>
07行目<br>
</p>
</body>
</html>
2.背景画像の固定指定サンプル
<html>
<head>
<title>背景画像スクロール指定サンプル（固定）</title>
<style type="text/css">
<!--
/* 背景画像スクロール指定サンプル（fixed） */
body
{
background : url("./img/bg-img2.png") no-repeat right top;
background-attachment: fixed;
}
-->
</style>
</head>
<body>
<span style="font-size:12pt; " >画像スクロール指定サンプル（固定）</span>
<p>
01行目<br>
02行目<br>
03行目<br>
04行目<br>
05行目<br>
06行目<br>
07行目<br>
</p>
</body>
</html>3.背景画像のスクロール指定サンプル（子要素）
<html>
<head>
<title>背景画像スクロール指定サンプル（子要素）</title>
<style type="text/css">
<!--
/* 背景画像スクロール指定サンプル（子要素） */
div.at1
{
background : url("./img/bg-img2.png") no-repeat right top;
background-attachment: local;
overflow: scroll;
height:80px;
}
div.at2
{
background : url("./img/bg-img2.png") no-repeat right top;
background-attachment: scroll;
overflow: scroll;
height:80px;
}
-->
</style>
</head>
<body>
<span style="font-size:12pt; " >画像スクロール指定サンプル（子要素）</span>
<p>
<div class="at1">
local指定：01行目<br>
local指定：02行目<br>
local指定：03行目<br>
local指定：04行目<br>
local指定：05行目<br>
local指定：06行目<br>
local指定：07行目<br>
</div>
</p>
<br>
<p>
<div class="at2">
scroll指定：01行目<br>
scroll指定：02行目<br>
scroll指定：03行目<br>
scroll指定：04行目<br>
scroll指定：05行目<br>
scroll指定：06行目<br>
scroll指定：07行目<br>
</div>
</p>
</body>
</html>| 関連するCSS(STYLE) | |
|---|---|
| background | 背景全般の設定 |
| background-blend-mode | 背景をブレンド |
| background-clip | 背景画像の表示エリア |
| background-color | 背景色の設定 |
| background-image | 背景画像の設定 |
| background-origin | 背景画像の表示位置の基点 |
| background-position | 背景画像の表示位置の設定 |
| background-repeat | 背景画像の繰返し設定 |
| background-size | 背景画像の表示サイズ設定 |
広告