相対パスを用いて表示されない時の対処法
HTML・CSSを覚えたての私が、CSS 内で background-image を使って背景画像を表示させようとしたところ、うまく表示されない...
調べてみたところ、次のことが分かりました。
-
絶対パスと相対パスというものが存在するらしい。 -
相対パスを用いる際は階層に注意する必要がある。
絶対パスというのは、URLなどでページやファイルを直接指定する方法ですね。
今回は相対パスを用いて背景画像を指定する際のポイントについてまとめます。
初歩的な内容ですが、自分の学習記録としてまとめてみました。
失敗の原因 どこから見たパスなのか？
今回使っていたファイルの階層構造は下記の通り。
- 親フォルダ
- index.html
- CSSフォルダ → styles.css（ここから画像ファイルを指定）
- imgフォルダ → pic1.png（背景に表示したいやつ）
このような階層構造のとき、今までHTML内で <img src="〜">で画像ファイルを指定していた経験から、
今回のようにCSS内で背景画像を指定する際も単純に img ディレクトリ内の pic1 を指定すれば良いものだと思っていました。
▼具体的にはこんな感じ
styles.css
/* 略 */
.top-wrapper {
background-image: url("img/pic1.png");
background-size: cover;
}
/* 略 */
これが失敗の原因でした。
というのも、相対パスでURLを指定する際はHTMLファイルからではなく、CSSファイルから見たパスを指定する必要があるようです。
というわけで。
- styles.css ファイルから一つ上の階層にある CSS フォルダに戻り（../）、
- CSS フォルダと同階層にある img フォルダ内の、pic1.png ファイルを指定する（img/pic1.png）
styles.css
/* 略 */
.top-wrapper {
background-image: url("../img/pic1.png");
background-size: cover;
}
/* 略 */
解決しました
たったこれだけですが、パスの意味を知るきっかけになり良かったです！
▼参考にさせていただいたサイト
- background-imageが表示されない！絶対パスと相対パスを理解する
- [cssで背景に指定した画像だけが表示されない]
(https://ja.wordpress.org/support/topic/css%E3%81%A7%E8%83%8C%E6%99%AF%E3%81%AB%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%9F%E7%94%BB%E5%83%8F%E3%81%A0%E3%81%91%E3%81%8C%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%AA%E3%81%84/)
また、表示したい画像の大きさによっては、width や height を設定しないと十分なスペースが確保されずに画像が切れてしまうこともあるようです。
- [< body > 内でbackground-imageが効かないことに関して]
(https://teratail.com/questions/19088)