|
background-image:url(〜)背景の画像を指定する
使用例 div { background-image: (img/image.gif) }
外部CSSファイルを使う場合の相対パスは、CSSファイルのある場所が基準になります。
上記の例の場合でいうとCSSファイルがある場所にimgというフォルダを作り、その中にimage.gifという画像ファイルを入れているといった具合です。
background-color背景の色を指定する
使用例 body { background-color: #ffffff; } p { background-color: silver; }
silverのように色の名前で指定してもいいですし#ffffffのように16進数で指定してもいいです。
background-repeat背景画像の繰り返しを指定する
使用例 div { background-image: (img/image.gif) background-repeat: repeat-x; }
繰り返しを設定することにより横や縦に画像を伸ばすことが出来ます。
繰り返しを指定する値
| repeat-x |
横方向に並べます |
| repeat-y |
縦方向に並べます |
| repeat |
領域いっぱいに表示します |
| no-repeat |
通常の画像サイズで表示します |
background-position背景画像の表示位置を指定する
使用例 div { background-position: right; }
h1 { background-repeat: repeat-x; background-position: center; }
div { background-repeat: no-repeat; background-position: 100px 20%; }
３つ目の例のように位置を表す指定を２つ指定すると最初に指定した方は横方向の指定、2番目に指定した方は
縦方向を指定します。１つだけの場合は、横方向の位置が指定され、縦方向は画面の中心に配置されます。
表示位置の値
| 横方向 |
left |
左側に表示されます |
| center |
中央に表示されます |
| right |
右側に表示されます |
| 縦方向 |
top |
上に表示されます |
| center |
中央に表示されます |
| bottom |
下に表示されます |
ピクセル指定・・・ピクセルで位置を指定した場合は、ページの左端から画像の左端、上端から
画像の上端までの距離が指定されます。
％指定・・・
例えば20％で位置を指定した場合は、画像内の20％の位置がページの端から全体の幅の20％となるように指定されます。
background-attachmentスクロールを指定する
使用例 body { background-image: (img/image.gif) background-attachment: fixed; }
背景画像をスクロールしなく設定できます。通常は画面に合わせ背景もスクロールします。
このサイトもfixedを使って背景を固定しています。
|
