CSS3にて画像が表示されません エラーコード Failed to load resource:

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。

HTML5とCSS3を使ってWebページのheaderを作ってました
なのですが,headerにbackground-imageにurl()を使ってファイルの
指定をしたのですが画像が反映されません。
画像の名前はこのファイルと同じフォルダの中にあり

h.jpgという名前です
エラーメッセージのgen204:1というのがよくわかりません

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

Failed to load resource:　　　　　gen204:1
net::ERR_FILE_NOT_FOUND

該当のソースコード

.header {
  height: 95vh;
  background-image: linear-gradient(to right bottom,rgba(126, 213, 111, 0.8),
  rgba(40, 180, 131, 0.8),
  url(h.jpg);
  background-size: cover;
  background-position: top;
}

試したこと

画像の名前を変えたり、
htmlのフォルダの名前を変えたりした

Answer 1

画像に関してはmts10806さんが指摘したようなことが原因と思われます
「gen204:1」の意味については断言できないのですが，404 Not FoundのようなHTTPステータスコードの種類の中にも204があり，これは「通信はできたが，返すべきデータがなかった」という意味なので，net::ERR_FILE_NOT_FOUNDとも合致しますから，そういう意味なのだと思います

ちなみに，CSSの方ですが，
linear-gradient()の「)」が抜けているので，
background-imageプロパティにセットされている値は
「linear-gradient(to right bottom,rgba(126, 213, 111, 0.8),rgba(40, 180, 131, 0.8),url(h.jpg);background-size: cover;background-position: top;}」となります．

以下の画像のように，その後に他のスタイルを記述した場合も，background-imageの値として認識されてしまうため，例え，画像の指定を失敗していなくとも，効きません

HTMLでもそうですが，「閉じ」を忘れないようにしましょう

---

画像に限らず，パスを指定する際は
多くの場合，「絶対パス」「相対パス」「ルート相対パス」のどれかで指定します
どのようにして記述するかは，以下を参考にしてください

• 絶対パス、相対パス、ルートパスの違いってなに？メリット・デメリットは？

Comments

[sho__]

ありがとうございます
解決しました!

Answer 2

cssからファイルなどを指定する場合はそのcssからのパスでなければなりませんが、
cssがあるフォルダと同じフォルダに画像がないからではないでしょうか。
background-imageに色々指定されていますが、CSSからすると外部リソースを利用するurlだけで指定して想定通り動いてから他の指定を入れられたほうが確実かと思います。

Comments

[sho__]

上記の方法で試してみたらできました。
ありがとうございます！