XHTML/CSS・トップ | CSSプロパティ・目次

●背景関連をまとめて指定する

 background は背景関連のプロパティを一度に指定するプロパティです。


■背景関連のプロパティ一覧表

背景関連のプロパティの種類 説明
background 背景関連の一括指定
background-attachment 背景画像の固定
background-color 背景色を指定
background-image 背景画像の指定
background-position 背景画像のポジションを指定
background-repeat 背景画像の並び方(repeat=繰り返し)

 background プロパティは background-attachment、background-color、background-image、background-position、background-repeat の各プロパティで使える値を半角スペースで区切り、最低限ひとつ指定すれば、ほかは省略することができます。また、すべての要素に適用することができます。ここではすべての値を指定した解説をします。(画像は表示されませんが)


【CSS】↓

body {
  background: #000000 url(back007.gif) no-repeat fixed;
  color: #ffffff;
}

【補足】↑↓

 ページ全体の背景色に#000000(黒)、背景画像にback007.gifの(架空の)ファイル、背景画像の繰り返しに no-repea(繰り返しなし)、fixedの値を指定して画像を1枚の背景画像として固定しています。

 仮に使用する背景画像のファイル名が back007.gif だったとします。このとき、HTMLファイル、CSSファイル、背景画像ファイルがそれぞれどこのディレクトリにあるのかによって、( )内の内容が変わります。すなわち、相互の階層位置によって、指定する画像ファイル名にパスが生じることに注意してください。例えば、url(back007.gif) はCSSファイルと背景画像ファイルが同じディレクトリにある場合のみそのまま使えます。

※ディレクトリとはウィンドウズの場合、フォルダに該当します。また、( ) は半角記号です。

※ url と ( の間にスペースを入れると失敗します。url( ) と付けてください。

※CSSファイル、背景画像ファイルをどの階層に置くかは作者が勘案します。また、拡張子を除いたファイル名および、ディレクトリ名は作者が任意に付けます。


■以下は、パスが生じる場合の解説です。↓

【HTML】↓

<!DOCTYPE 〜 >
<html>
<head>
 〜
<title>Webページタイトル</title>
<link rel="stylesheet" type="text/css" href="./sample.css">
</head>
<body>
 〜
</body>
</html>

【解説】↑↓

 拡張子を合わせたCSSファイル名を"sample.css"とすると、HTMLファイルからCSSファイルへの指定としてのリンク要素(<link rel="stylesheet" 〜 >)は上記のような感じになります。


■相互の位置関係による相対パス( url )とリンク要素の関係↓

1.CSSファイル、HTMLファイル、背景画像ファイルのすべてが同じディレクトリにある場合。

url(back007.gif)、<link rel="stylesheet" type="text/css" href="./sample.css">

2.CSSファイルがHTMLファイルからみて、サブディレクトリ内にあり、背景画像ファイルがHTMLファイルと同じディレクトリにある場合。(CSSファイルが入るディレクトリ名を仮に Css とします。)

url(../back007.gif)、<link rel="stylesheet" type="text/css" href="./Css/sample.css">

3.CSSファイルが(HTMLファイルから見て)サブディレクトリ内にあり、かつ、背景画像ファイルがCSSファイルの入っているサブディレクトリとは別のサブディレクトリ内にあるとした場合。(そのサブディレクトリ名を仮に layout とします。)

url(../layout/back007.gif)、<link rel="stylesheet" type="text/css" href="./Css/sample.css">

※それ以外のケースも含め、リンク要素や相対パスについては、別項を参照にしてください。また、"./"とドットがひとつの場合は"./"を省略することができます。


■参考画像↓

HTMLファイルからCSSファイルを指定し、かつ、CSSファイルから背景画像を指定する。写真は以前の構成でcssフォルダはCssフォルダに変わりました。


【まとめ】↓

 ユーザーの設定や環境によって、画像が表示されないケースもありますので、必ず背景色も同時に指定しておきましょう。色は画像と同系色が良いでしょう。


■関連ページ

XHTML/CSS・目次 | 背景・目次

Copyright (C) 2004-2007 http://www.xml.vc/