background-imageが表示されなくなってしまったこと

現在PFサイトを作っているのですがnab-varの下にbackground-imageで背景写真を追加しようとしました。しかしnav-barを以下のように記述するとbackground-imageが正しく表示されなくなってしまいました。

以前background-imageをうまく表示していた時はセレクタをheaderとしてcssで読み込むときちんと表示できていましたがその時のセレクタは

.headerではなくただ headerとしていたのにきちんと表示できていました、
ここがよくわかりませんん。

自分としては.head-imageとすることでhead-imageクラスを読み込んでassets配下に設置したimagesをbackground-image urlで読みこみたいと考えています。

以下にindex.html index.cssの順番にソースコードを記述しております。
何卒よろしくお願いします！

html
1<html>
2<head>
3<meta charset="UTF-8">
4<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5<link rel= "stylesheet" href="style.css">
6<title>PF Ryusei Korogi</title>
7 <link rel="stylesheet" href="./css/reset.css">
8    <link rel="stylesheet" href="./css/style.css">
9    </head>
10 <h1></h1>
11 <div class="My-Name">
12<p>Ryusei Korogi</p>
13</div>
14
15<div class="navbar">
16 <ul class="nav-lists">
17          <li>about</li>
18          <li>skills</li>
19          <li>works</li>
20          <li>contacts</li>
21        </ul>
22      </div>
23
24<body>
25<header>
26</header>
27<div class="head-image">
28<div class="first-view">
29<div class="about">
30<h1>about</h1>
31<p>興梠 硫世1997年生(23歳)</p>
32<p>テックキャンプ 丸の内校 2020年卒</p>
33<p>ソフトバンクショップでの販売を経験後、学生ビザでフランス語を勉強しながらフランス・モンペリエの日本食レストランに就業。</p>
34<p>帰国後三井住友銀行にて営業プロジェクトリーダーを経験。</p>
35<p>前職の知人のアプリについて話を聞き感化されweb業界に興味を持ちTECH・CAMPで本格的にプログラミングの学習を始める。</p>
36<p>そして現在転職活動をしながら知人のサービスを作成し、Javascript・React.jsを勉強中</p>
37</div>
38<!-- 『トップ画像』を表示する -->
39</div>
40<div class="skills">
41        <!-- 『扱える言語』を表示する -->
42        <h1>skills</h1>
43        <p>"HTML/CSS/Javascript/Ruby/RubyonRails
44Git/AWS(S3)/Heroku"</p>
45      </div>
46      <div class="works">
47      <!-- 『作ったアプリ』を表示する -->
48      <h1>works</h1>
49      <html>
50<% @sites.each do |site| %>
51  <%= site.id %>
52  <%= site.memo %>
53  <%= site.site_name %>
54  <%= site.site_URL %>
55  <%= site.site_Description %>
56<% end %>
57</html>
58      </div>
59      <div class="contacts">
60        <!-- 『コンタクトフォーム』を表示する -->
61        <h1>contacts</h1>
62        <p>お問い合わせフォーム<p>
63      </div>
64    </div>
65
66    <footer>
67    </footer>
68  </body>
69  </html>
70コード

    top: 0;
    height:100px;
    width: 50%;
    margin-left: 30px;
 background-color: white;
 background-size: cover;
 background-position: fixed;
    position: fixed;
    padding: 10px 0;
  display: flex;
  }
  
  .navbar{
  height: 100px;
  width: 50%;
  padding: 20px;
  background-color: white;
}

.nav-lists {
  display: flex;
  justify-content: space-around;
}

li {
  list-style: none;
}


  }

.heade-image {
  top: 100px;
  height: 540px;
  width: 100%;
     background-image: url("<%= asset_path("240eba1ae4430910eb94660551f77.jpg") %>");
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     background-attachment:fixed
     overflow: hidden;
  }
  
  .about {
    margin: 150x;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .skills {
    height : x;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .works {
    height : x;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .contacts {
    height : x;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
コード

gpsoft

2020/11/27 13:13

CSSの冒頭が欠けているようなので、修正していただけますか? それと、「.heade-image」は、誤記ですね。「.head-image」でしょう。また、.heade-imageの上の行にある、閉じカッコは不要だと思います。

korogi

2020/12/20 09:37

ありがとうございます！！！

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

回答1件

ベストアンサー

いくつか間違いがあります。
まず、HTML。

<body>開始タグは、</head> の直後にないとダメですが、.navbarブロックの後に来てます。これを、</head> の直後に移動させてください。

次にCSS。
質問に提示のCSSは途中からのようですね。まあ、その部分はスルーするとして、
.heade-image {
これは、
.head-image {のタイポですね。

あと、.head-image { の前の }が一つ余分ですね。

それらを修正すれば背景画像は表示されると思います。

提示のコードはインデント（字下げ）が無茶苦茶ですが、これをちゃんとしないと、このようなミスは今後も発生しますよ。
エディターは何を使ってますか。
プログラミング用エディターを使うとインデントを自動でしてくれたり、構文間違いを指摘してくれますのでコーディングが捗りますよ。
今ならVSCodeがお勧めです。

投稿2020/11/27 13:31

hatena19

総合スコア34075

korogi

2020/11/28 09:56

<body>開始タグはheadの直後におきますとaboutの前に不自然にきてしまうので特にやりたい結果のイメージとしては右上にnavbarを設置してそれに今後jsを設定してタッチするとそのタグまで自動でスクロールしてくれるというデザインをしたいと考えています。今回のケアレスミスに関してはすべて解決しました！しかしやはり文字がbackground-imageに乗ってしまう問題に関してまだ解決できておりません。何が間違えているのでしょうか？

hatena19

2020/11/28 23:16

まずは、質問のCSSコードが途中からになっているので、それを修正してください。でないとそちらの正確な状況が分かりません。 <body>タグの位置はHTMLの文法違反ですので、それ以外の方法で対処してください。全体をブロックで囲むとか。質問は、「background-imageが表示されない」ということですが、それは解決したのですね。「文字がbackground-imageに乗ってしまう」は背景画像なので当然そうなりますが、どうなってほしいのですか。ただ、質問内容が当初とは異なってきてますので、新規に質問しなおした方がいいでしょう。

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