background-imageが表示されません。

Question

前提・実現したいこと

こんにちは。htmlとcssを学習している初学者です。
cssで背景に画像を表示したいのですが、画像が表示されず困っています。
初歩的な内容だと思いますが、調べた内容を試しても解決しなかったため質問しました。

発生している問題・エラーメッセージ

画像が表示されない。

該当のソースコード

<!-- <img src="pictures\woods.jpeg"></img> -->
<div class="home-wrapper">
  <div class="home-container">
    <h1>テキスト</h1>
  </div>
</div>

.home-wrapper {
  width: 100vw;
  height: 100vh;
  background-image: url("pictures\woods.jpeg");
  background-size: cover;
  background-color: red;
}

試したこと

画像のパスが間違っている訳ではないようです。
cssのbackground-imageで背景画像を挿入できなかったため、
htmlのimgタグを使用して画像を挿入したところ、画像が問題なく表示されました。
（htmlのソースコードの中でコメントアウトしてあります）

また、css自体も問題なく適用されています。
background-colorは赤色で表示されている状況です。

補足情報（FW/ツールのバージョンなど）

atomでコードを書いています。
ブラウザはChromeです。
PCはSurfaceを使用しています。

Answer 1

background-colorと,background-imageが混同している可能性が考えられるので、一度background-colorを外してみてください

Comments

[Winnie207]

回答ありがとうございます！
background-colorを外してみましたが、
色がなくなるのみで、画像は表示されませんでした。

[退会済みユーザー]

background-image以外をけしてやったらどうなりますか？

[Winnie207]

すべて外してみましたが、変わりませんでした。

その後一応自己解決したのですが、なぜ解決したか分かりません…
もし可能であれば、教えていただけると嬉しいです。

さきほど、Chromeのデベロッパーツールで以下のエラーが出ているのを見つけました。
GET file:///C:/Users/username/Documents/GitHub/Portfolio/pictureswoods.jpeg net::ERR_FILE_NOT_FOUND

パスが
~Portfolio/pictureswoods.jpeg ではなく、
~Porfolio/pictures/woods.jpeg だったため、

background-image: url("file:///C:/Users/username/Documents/GitHub/Portfolio/pictures/woods.jpeg ")
と絶対パスで指定したところ、解決しました。

cssのurl()のパスを
/pictures/woods.jpeg と指定しても
C:\Users\username\Documents\GitHub\Portfolio\pictures\woods.jpeg と指定しても
できませんでした。
いずれもhtmlのimgタグ内で使用する分には問題なく使用できました。

なお、cssのurl()のパスを
C:\Users\username\Documents\GitHub\Portfolio\pictures\woods.jpeg
としたところ、
GET file:///C:/UsersusernameocumentsGitHubPortfoliopictureswoods.jpeg net::ERR_FILE_NOT_FOUND
上記のようなエラーになりました。

なぜ、
・pictures\woods.jpeg のパスだとできないのか？
・htmlのimgタグ内では使用できるのか？

教えていただけると助かります。

[退会済みユーザー]

逆スラッシュになってたからではないですか？？
.home-wrapper {
width: 100vw;
height: 100vh;
background-image: url("pictures\woods.jpeg");
background-size: cover;
background-color: red;
}

[退会済みユーザー]

あと、最初に"/"いらないかもです

[退会済みユーザー]

GET file:///C:/UsersusernameocumentsGitHubPortfoliopictureswoods.jpeg
net::ERR_FILE_NOT_FOUND
はファイルがなかったよーという意味です。
ディレクトリ間は/で区切る
という原因です

[Winnie207]

逆スラッシュになっていたからでした…
初歩的過ぎるミスで大変お恥ずかしいです(笑)

ありがとうございました！