background-imageで画像を表示させたいが表示されない（相対パスを貼るも、イメージの読み込み中にエラーが発生しました）

Question

<div class="hero"></div>

.hero {
    background-image:url(相対パス);
}

上記のように、括弧内に相対パスを張り付けても画像が表示されません。

画像をVisualStudioCodeにドラッグし、画像のところから相対パスをコピーし、張り付けても画像が表示されません。そこからリンク先を表示してもイメージの読み込み中にエラーが発生しましたと出ます。

何か簡単な方法があれば教えていただけないでしょうか。

Answer 1

VSCodeの「Copy Relative Path」はルートからの相対パスです。
なので、画像とCSSファイルが別のルートにいる場合や、HTMLファイルをダブルクリックするなどのエクスプローラー（ファインダー）経由で開いている場合は、上手くいかないと思います。

簡単な方法としては、「すべてのファイルをエクスプローラー（ファインダー）で同じフォルダにつっこみ、相対パスをファイル名だけにする」というやり方もあると思います。

Answer 2

divって何の幅も余白もないブロックなので、
ちゃんと縦横のサイズを指定する必要があるのでは。

そこからリンク先を表示してもイメージの読み込み中にエラーが発生しましたと出ます。

だと、そもそもパスが間違ってる可能性もありますけどね。
そのbackground-imageが書かれているファイルからのパスになっているかご確認を。
（この質問内容だけでは他者には「どこ」という的確な回答はできませんが）