URL関数にURLのパスを設定する
url関数
CSS
background: url("sample.gif");
background-image: url('sample.gif'); /*個別指定の書式*/
background-image: url(sample.gif);
( )の中のURLのパスは「”」や「’」をつけてもよいし、省略してもよいです。
パス
パスというのは、画像の名前と画像の置いてある場所を表します。住んでいる人の名前と住所に当たります。
相対パス
上の例では、sample.gif が画像名です。ファイル名のみで呼び出しています。この書き方は、HTMLファイルやCSSファイルと同じ場所に画像ファイルがある場合の書き方です。
フォルダ
HTMLファイル
CSSファイル
sample.gif
このような場合を相対パスと呼びます。つまり、呼び出すファイルの置いてある場所から見た場所を指定する書き方です。同じ場所(同一のフォルダ内)に置いてあれば、例に示すような書き方になります。
呼び出すファイルの置いてある場所に別のフォルダ(image)があってその中に画像ファイルがある場合には、 image/sample.gif の様に記述します。
フォルダ
HTMLファイル
CSSファイル
sample.gif
image
同じフォルダ内ではなく、一つ上の階層に画像ファイルがある場合には、../sample.gif の様に記述します。
上位フォルダ
HTMLファイル
CSSファイル
下位フォルダ
sample.gif
絶体パス
画像の置いてある位置を基点(ルート)から完全に指定するには、絶対パスを使います。
画像ファイルの置いてある場所を、住所で例えるならば、国名から順に番地まで示すような書き方のパスになります。通常 http://~ という形になります。
