URL関数にURLのパスを設定する

url関数

background: url("sample.gif");
background-image: url('sample.png');
background-image: url(sample.jpeg);

(  )の中のURIのパスは””,’’をつけてもよいし、省略してもよいです。

パス

パスというのは、画像の置いてある場所と画像についている名前のことです。

相対パス

上の例では、sample.gif というのが画像の名前です。名前だけで呼び出しています。この書き方は、HTMLファイルやCSSファイルと同じ場所に画像ファイルがある場合の書き方となります。

 

このような場合、相対パスと呼びます。つまり、呼び出すファイルの置いてある場所から見た画像ファイルの置いてある場所を指定する書き方です。同じ場所(同一のフォルダ内)に置いてあれば、例に示すような書き方になります。

 

呼び出すファイルの置いてある場所に別のフォルダ(imageA)があってその中に画像ファイルがある場合には、 imageA/sample.gif の様に記述します。

 

同じフォルダ内ではなく、一つ上の階層に画像ファイルがある場合には、../sample.gif の様に記述します。

絶体パス

画像の置いてある位置が呼び出すファイルとは違う場所、フォルダの場合には、絶対パスで指定します。

画像ファイルの置いてある場所を、住所で例えるならば、国名から順に番地まで示すような書き方のパスになります。通常 http:~ という形になります。

女の子の絵