サイト内検索
...スタイルシート(css)...
スタイルシート・背景画像
背景
- 背景色や背景画像を一度に指定するには、backgroundプロパティを指定します。
- 指定内容は、
- 背景色・背景画像・並び方・画像スクロール・表示位置 などです。
組み合わせた使用例は、こちらです。
複数の設定を一つまとめて表示
| 内容 | ||||||
|---|---|---|---|---|---|---|
| background: | blue | url(sample.gif) | no-repeat | scroll | left |
; |
| 背景色 | 背景画像 | 並び方 | 画像のスクロール | 表示の位置 | ||
半角のスペースで区切って記述します。
順番は自由で、必要のない設定は省略できます。
省略した部分は指定なし(標準値)になります。
背景画像
- 背景画像は、background-imageプロパティを指定します。
- [使い方]
- background-image: url(../sample.jpg);
| プロパティ名 | 値 | 説明 |
|---|---|---|
| background-image: | ; | 「url(../img/sample.jpg)」
のように表示する画像（url）を指定します。 |
| none; | 画像なし（指定なしのことです） |
- 外部ファイルで背景画像を表示させる場合・・・・MSN相談箱より
- 背景画像の外部スタイルシートファイル（.ｃｓｓ）から見た
- 画像ファイルの相対アドレス（url）を記述します。
背景画像の表示方法
繰り返し方法は、background-repeatプロパティを指定します。
| プロパティ名 | 値 | 説明 |
|---|---|---|
| background-repeat: | repeat; | 縦横に繰り返えす初期値です |
| repeat-x; | 横方向のみに繰り返します | |
| repeat-y; | 縦方向のみに繰り返します。 | |
| no-repeat; | 画像を１回だけ表示して繰り返さないので、
画像を固定するときに指定します。 |
背景画像の表示位置
- 表示する位置には、background-positionプロパティを指定します。
- background-repeat:no-repeat; と組み合わせて指定します。
- 数値でも指定ができます（％・ｐｘ・ｐｔなど）
- [使い方]
- 左からの位置を100px、上からの位置を200pxに設定したい場合は、
- background-position:100px 200px;と指定します。
| 左右の位置 | ||
|---|---|---|
| プロパティ名 | 値 | 説明 |
| background-position: | left; | 左に指定します。 |
| center; | 中央に指定します。 | |
| right | 右に指定します。 | |
| 上下の位置 | ||
|---|---|---|
| プロパティ名 | 値 | 説明 |
| background-position: | top; | 上に指定します。 |
| center; | 中央に指定します。 | |
| bottom; | 下に指定します。 | |
《「中央上のみに固定して表示する」場合》
background-repeat: repeat-x; background-position: center top;↑半角スペースを入れて書きます。
背景画像の固定
- 背景画像を固定には、
- background-attachmentプロパティを指定します。
- 左端や右端で固定しなくてもいい場合は削除します。
- [「background: fixed;」をIE６で対応させるには、下のソースを記述します。]
- * html #contents {
background-position: expression
('10px '+this.parentNode.scrollTop + 'px');
}
「CSS-lecture」 を参照させていただきました。
| プロパティ名 | 値 | 説明 |
|---|---|---|
| background-attachment: | fixed; | 固定する・・スクロールさせない |
| scroll; | 固定しない・・スクロールさせる（デフォルト） |
それぞれ組み合わせることができます。
