.
.
.
.
.
TOPページ(Alt+B)
.
背景(画)に対するスタイル指定

background-color: 色(カラーコード)

背景色を指定する。指定は「カラーコード」で行う。

<body style="background-color: #eeeeee; color: #000000">

<table style="background-color: #eeeeee; color: #000000">

背景色の指定はボディ全体からテーブルの内部色まで、あらゆる場所で指定することができる。ちなみに初期状態の背景は一見白のように見えるが、透過状態になっており、これはスタイルシートでは「background-color: transparent」と指定する。また、「background-color」を指定した場合は、同時に前面色である「color」を指定しておくことが推奨される。

background-image: url('画像のパスとファイル名')

背景画像を指定する。書式は「url("画像のパスと画像ファイル名")」で指定する。

<td style="background-image: url('top/navbar.gif')">

背景画像の指定もボディ全体からテーブルの内部色まで、あらゆる場所で指定することができる。通常、width(幅)とheight(高さ)を同時に指定する。また、「background-image」を指定した場合は、同時に「background-color」と「color」も指定しておくことが推奨される。

background-attachment: fixed

背景画像を固定する。初期状態はscroll、つまり画面をスクロールすると画像も一緒にスクロールする状態となっている。

<body style="background-attachment: fixed">

と指定した場合、画像が固定された状態となり、画面をスクロールするとあたかも文字だけが動いているように見える。

background-position: 画像の指定位置

背景画像の位置を指定する。指定には「pt」、「em」、「in(inch)」等の算術指定、「%(パーセンテージ)」指定の他、「top」、「center」、「bottom」 と「left」、「center」、「right」を組み合わせて使うこともできる。

background-position: right top

と指定すると、画像は右端最上段に位置されることになる。

background-repeat: repeat

背景画像を繰り返す。つまりタイルのように敷き詰める。「background-repeat」は「background-image」とセットで使う。

<body style="background-image: url('top/navbar.gif'); background-repeat:repeat">

尚、「background-repeat」は「body」以外の場所を指定した場合、表示が大きく崩れる場合があるので注意が必要。また、反対に画像を繰り返させない場合は、「background-repeat:no-repeat」と指定する。

background: 複数の背景画像指定

「background-color」、「background-image」、「background-repeat」、「background-attachment」、「background-position」をまとめて指定する。

<body style="background: url("top/navbar.gif") blue 20% repeat fixed">

背景画像に対して複数の指定をする場合に「background」を使って簡略化することができる。

リファレンスTOP(Alt+R)

CopyRight (C) 2000-2013 by T.Shiraishi All right reserved 無断転載禁止/リンクフリー