画像が表示されないです

表題の通り、画像が表示されないです。なぜなのでしょうか？
やったこと
相対パスの確認→[vscode]のプラグインを使って自動でファイルが表示されたため問題なし
<img>タグで書くと表記されるため、imgじゃないと通用しないのか」問いましたが問題なさそうです。

目的
今回は画像の上に文字を入れたいです。しかし、できません。
私の仮説ではimgタグでは文字が画像の上に表示されないと判断しCSSにbg-imageを使って書こうとしましたが
表示されません。

現状

追記しました。
mainタグは書きましたが、かわりませんでした泣

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Coding Practice</title>
8    <meta name="description" content="Coding Practiceです">
9    <link rel="stylesheet" href="CSS/reset-html5.css">
10    <link rel="stylesheet" href="CSS/style.css">
11
12</head>
13<body>
14    <header class="header">
15        <div class="image_word">
16            <img src="image/logo_transparent.png" id="logo" alt="Coding Practice">
17        </div>
18        <div class="header-wrapper">
19        <nav class="header-nav"> 
20   
21         <ul class="header-list">
22                <li class="list-item"> <a href="#"> Top</a></li>
23                <li class="list-item"><a href="#">My Challenge</a></li>
24                <li  class="list-item"><a href="#">Just Continue</a></li>
25            </ul>
26         </nav>
27         </div>
28
29    </header>
30
31　　<main class="main">
32        <div class class="main_title">
33            <div class="image">
34                <img src="image/austin-distel-wawEfYdpkag-unsplash.png" alt="main_image">
35            </div>
36　　　　　<h1 class="image_text">Coding Practice Everyday!!</h1>
37                    <p class="image_text">Start from HERE</p>
38             
39        </div>
40</main>
41

SCSS
1.main{
2    .main_title{
3
4    background-image: url(../../Image/austin-distel-wawEfYdpkag-unsplash.png);
5    background-position: center;
6    background-size: cover;
7    background-repeat: no-repeat;
8    width: 100%;
9    height: 551px;
10
11    
12
13    .image_text{
14        padding: 254px 452px;
15
16    }
17
18    }
19}

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

回答1件

ベストアンサー

まず、<img>で指定している画像は、表示されるはずです。表示されていますよね？表示されていないとしたらパス名が間違っています。

次にCSSで.main .main_title {に設定している背景画像ですが、これもHTMLにmainというクラスがあり、その中にmain_titleというクラスがあれば、これもそこに表示されるはずです。しかしながらHTMLにはそのような要素が無いので、表示されないのは当たり前です。
試しにHTMLのどこかに

HTML
1<div class="main">
2  <div class="main_title"></div>
3</div>

を加えてみてください。

投稿2021/05/10 00:13

itagagaki

総合スコア8402

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

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

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

画像が表示されないです

関連した質問