サイト内検索
...スタイルシート(css)...
スタイルシート・ボックス
背景(background)
- 背景色や背景画像を一度に指定するには、backgroundプロパティを指定します。
- 指定内容は、
- 背景色・背景画像・並び方・画像スクロール・表示位置 などです。
複数の設定を一つまとめて表示
内容 | ||||||
---|---|---|---|---|---|---|
background: | blue | sample.gif | no-repeat | scroll | left |
; |
背景色 | 背景画像 | 並び方 | 画像のスクロール | 表示の位置 |
半角のスペースで区切って記述します。
順番は自由で、必要のない設定は省略できます。
省略した部分は指定なし(標準値)になります。
背景画像
- 背景画像は、background-imageプロパティを指定します。
- [使い方]
- background-image: url(../sample.jpg);
プロパティ名 | 値 | 説明 |
---|---|---|
background-image: | ; |
「url(http://・・/sample.jpg)」
のように表示する画像(URL)を指定します。 |
none; | 画像なし(指定なしのことです) |
- 外部ファイルで背景画像を表示させる場合・・・・MSN相談箱より
- 背景画像の外部スタイルシートファイル(.css)から見た
- 画像ファイルの相対アドレス(url)を記述します。
背景画像の表示方法
繰り返し方法は、background-repeatプロパティを指定します。
プロパティ名 | 値 | 説明 |
---|---|---|
background-repeat: | repeat; | 縦横に繰り返えす初期値です |
repeat-x; | 横方向のみに繰り返します | |
repeat-y; | 縦方向のみに繰り返します。 | |
no-repeat; | 画像を1回だけ表示して繰り返さないので、
画像を固定するときに指定します。 |
背景画像の表示位置
- 表示する位置には、background-positionプロパティを指定します。
- background-repeat:no-repeat; と組み合わせて指定します。
- 数値でも指定ができます(%・px・ptなど)
- [使い方]
- 左からの位置を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-attachment: | fixed; | 固定する・・スクロールさせない |
scroll; | 固定しない・・スクロールさせる(デフォルト) |
[fixedを指定する際の注意]
ボックスに対する固定表示ではなく、ウィンドウに対する固定表示です。
サンプル
[headの中]
<style type="text/css"><!--
.sample1{
background-image: url(img/sample.gif) repeat-x;
width: 350;
height: 38;
}
-->
</style>
[bodyの中]
<div class="sample1">背景の画像</div>[ブラウザ上]
背景の画像