|
| ■ background-attachment プロパティ |
| 画面スクロール時に背景画像の固定する、しないを指定します。 |
| 背景画像を固定した場合、スクロールバーを動かしても背景画像は動きません。 |
値
- scroll (背景画像を固定しない)
- fixed (背景画像を固定する)
|
 ソース |
| background-attachment : fixed ; |
|
|
| ■ background-position プロパティ |
| 背景画像の表示開始位置を指定します。値は、単位をつけた数値、パーセンテージ値、キーワードで指定します。 |
| また、横、縦方向の順で、半角スペースで区切って記述します。値をひとつだけ指定した場合、その値は、横方向に適用され、縦方向は50%を指定した値になります |
キーワード
- left (横方向、左揃え)
- right (横方向、右揃え)
- center (縦、横方向、中央揃え)
- top (縦方向、上揃え)
- bottom (縦方向、下揃え)
|
| キーワードは、『 right bottom 』 『 left top 』のように、横、縦方向を組み合わせて指定する事もできます。 |
| ソース |
<style type="text/css">
<!--
body { background-image : url(back/kurousa-rotta.gif) ;
background-repeat : no-repeat ;
background-position : 0% 0% ; }
-->
</style>
|
| パーセンテージ値 | キーワード値 | サンプル( 別ウィンドウで表示 ) |
| 0% 0% | left / top | 表示 |
| 50% 0% | center / top | 表示 |
| 100% 0% | right / top | 表示 |
| 0% 50% | left / center | 表示 |
| 50% 50% | center / center | 表示 |
| 100% 50% | right / center | 表示 |
| 0% 100% | left / bottom | 表示 |
| 50% 100% | center / bottom | 表示 |
| 100% 100% | right / bottom | 表示 |
|
| ソース |
<style type="text/css">
<!--
body { background-image : url(back/kurousa-rotta.gif) ;
background-repeat : no-repeat ;
background-position : right bottom ; }
-->
</style>
|
|
|
|
|
|
|
背景・背景画像