皆様、こんにちは。
今回はCSSのプロパティ、background-imageで背景画像を表示させようとした際、意外と陥りやすいかもしれない落とし穴について書いていこうと思います。
前回の記事：
初心者備忘録②：labelとinputを綺麗に揃える方法
background-imageプロパティで背景画像を設定する
今回は下記のような階層構造でサイトを作成します。
ではまず、適当なHTML、CSSを記述します。
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css\style.css">
<title>背景画像の反映</title>
</head>
<body>
<h1>背景画像の反映</h1>
</body>
</html>
h1 {
text-align: center;
}
background-imageプロパティの書き方は下記のようになります。
セレクタ {
background-image: url(画像のパス);
}
これを基にCSSに追記します。
HTMLにimgタグで画像を表示させるときのようにurl後ろのカッコ内に画像の相対パスを記述します。
h1 {
text-align: center;
}
body {
background-image: url(img/blue.jpg);
background-size: cover;
}
画面全体に画像を反映させるためbackground-sizeプロパティにcoverを指定しています。
この状態でサイトを表示させてみます。
何も反映されず真っ白な画面が表示されてしまいました。
こうなってしまう原因は何かというと、サイトを作り慣れている方であればすでにお気づきかもしれませんが、画像のパスがHTMLから見た相対パスになってしまっていることです。
相対パスはどのファイルから見たパスなのかを注意する
今回CSSに記述したimg/blue.jpgという相対パスは、「同じ階層のimgフォルダの中にあるblue.jpg」という意味になります。
もし、HTMLにimgタグで画像を表示したい場合、記事冒頭の階層構造を示す画像を見て分かる通り、index.htmlとimgフォルダは同じ階層内にあるためこの書き方で問題ありません。
注意しなければならないのは、CSSに相対パスを記述する場合はあくまでCSSから見たパスを記述しなければならない点です。
そのため今回の階層構造であれば「(style.cssから見て)一つ上の階層のimgフォルダの中にあるblue.jpg」という意味の相対パスを記述する必要があります。
一つ上の階層を示す場合、パスの先頭に「../」を記述すればよいので下記のようにCSSを修正します。
h1 {
text-align: center;
}
body {
background-image: url(../img/blue.jpg);
background-size: cover;
}
改めてサイトを表示してみます。
画像を表示させることができました！
「../」の数でいくつ上の階層かを示せる。
「../../img/blue.jpg」で二つ上、「../../../img/blue.jpg」で三つ上となる。
まとめ
いかがだったでしょうか。
相対パスを記述する際は以下の点を意識する必要があります。
・相対パスを記述するファイルから見て、対象のファイルがどこにあるのか
・「../」の数の分だけ上の階層を示すことができる
ついついHTMLから見た相対パスを記述してしまうことが意外とあるため注意しましょう。
私も何故背景が表示されないのか分からずしばらく悩みました……。
慣れない内は階層構造の図を書いてみるとよいかもしれませんね。