background-imageで画像が見つからない

前提・実現したいこと

id名がtopのdivにbackground-imageで背景を表示させたいのですが、styleタグを利用して表示させようとしても何も変化がありません。
検証した結果、ファイルが見つからないという趣旨のエラーメッセージが出たのですが画像ファイルはフォルダ内のhtmlファイルと同じ階層に準備しています。
改善策をお願いします。

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

Failed to load resource: net::ERR_FILE_NOT_FOUND

該当のソースコード

HTML
1<!doctype html>
2<html class="no-js" lang="">
3
4<head>
5  <meta charset="utf-8">
6  <title></title>
7  <meta name="description" content="">
8  <meta name="viewport" content="width=device-width, initial-scale=1">
9
10  <meta property="og:title" content="">
11  <meta property="og:type" content="">
12  <meta property="og:url" content="">
13  <meta property="og:image" content="">
14
15  <link rel="manifest" href="site.webmanifest">
16  <link rel="apple-touch-icon" href="icon.png">
17  <!-- Place favicon.ico in the root directory -->
18
19  <<!-- CSS only -->
20<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
21  <meta name="theme-color" content="#fafafa">
22
23</head>
24<body>
25
26    <style>
27        #top{
28            background-image:url(mizugi.jpg);
29            background-size:cover;
30            background-position:center center;
31            background-repeat: no-repeat;
32        }
33      </style>
34
35<div class="container p-4">
36</div>
37
38     <div id="top"class="container mt-5 p-5 w-50">
39     
40     <div class="row flex-column d-flex align-items-center justify-content-center">
41
42        <h1 class="col-3 text-center mb-5">クイズ</h1>
43        <button type="button" class="col-2 btn btn-primary mb-3">初級</button>
44        <button type="button" class="col-2 ml-1 btn btn-primary mb-3">中級</button>
45        <button type="button" class="col-2 ml-1 btn btn-primary mb-3">上級</button>
46        <button type="button" class="col-2 ml-1 btn btn-primary mb-3">冥府級</button>
47
48     </div>
49        
50    </div>
51</body>

行動規範の内容に同意します

回答1件

ベストアンサー

ご記載のソースコードを用いて私の環境で試したところ画像が表示されました。
mizugi.jpgと実際のファイル名に間違いはないでしょうか？

投稿2021/08/27 09:16

texo

総合スコア31

bob-kitchin

2021/08/27 11:37

申し訳ありません。私のPCに似ている名前のhtmlファイルが２つあり、mizugi.jpgがないファイルをずっといじっていました。 mizugi.jpgがあるファイルで試したところ画像が表示されました。回答ありがとうございました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！