16.4.6. 背景の色と画像
背景色・背景画像の指定について説明します。HTML のみに頼った記法では背景色・背景画像は body 要素全体に一律指定することしかできませんでしたが、CSS を使うと全ての要素に対して個別に指定することができるようになります。CSS を用いる事の利点の一つに、このようなスタイル指定の細かさがあります。
背景色の指定 #
CSS では各要素ごとに背景色を指定することができます。背景色の指定には background-color プロパティを使います。
ソース
背景をグレーにしました。
これを利用して、白抜きなどもできます。
ソース
白抜き
もちろん、body 要素に対してこのプロパティを指定すれば、全体の背景色を変えることができます。色の指定方法は font-color プロパティと同様です。
背景画像の指定 #
背景には色の他に、画像を指定することもできます。例として次の画像を使います。
背景画像を指定するには、background-image プロパティを用います。
ソース
背景を格子模様にしました。
値には背景画像の url を url(” “) の中に記述します。このときクオーテーションは ‘ でも ” でも良いのですが、上の例では style 属性を書くときに ” を使っているので、記号が重複しないよう ‘ を使っています。
背景画像の繰り返し方 #
背景の繰り返し方を指定することもできます。background-repeat プロパティの値で repeat-x を指定すると横方向の繰り返しのみ、repeat-y を指定すると縦方向の繰り返しのみになります。繰り返しをしないときは、no-repeat を指定します。
ソース
こうすると背景は
横方向にのみリピートされます。
こうすると背景は
横方向にのみリピートされます。
背景画像の表示位置 #
背景画像の表示位置を調整するには background-position プロパティを使います。
ソース
background-position プロパティで bottom を指定したので
背景の表示される位置が下になります。
background-position プロパティで bottom を指定したので
背景の表示される位置が下になります。
値の指定は top, center, bottom と left, center, right を繋げて書く方法と、垂直位置・水平位置の順に数字で指定する方法があります。数字で指定する場合は親要素の長さに対する割合を % で指定するか、 16.4.9. 補足 で説明する方法で指定します。