background-imageが表示されません。

`ここに言語を入力　html css
コード

### 前提・実現したいこと
画面に背景画像が表示されないので、表示されるようにしたいです。
ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

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

エラーメッセージ

8a72c7daaf02fc6fd35a80a249f7e15062a230b4.jpg:1
1上記のエラーメッセージがchromeデベロッパーでconsoleで出ました。
2
3### 該当のソースコード
4
5```ここに言語名を入力
6ソースコード
7```<!DOCTYPE html>
8<html lang="ja">
9<head>
10  <link rel="stylesheet" href="sumitomo.css">
11  <meta charset="UTF-8">
12  <meta name="viewport" content="width=device-width, initial-scale=1.0">
13  <title>Document</title>
14</head>
15<body>
16  <header>
17    
18    
19
20   
21    <div class="head2">
22      <h1>住友商事</h1>
23      <p>Enriching lives and the world</p>
24      <div class="clear"> </div>
25    </div>
26        <ul>
27          <li>企業情報</li>
28          <li>事業紹介</li>
29          <li>ニュース</li>
30          <li>サステナビリティ</li>
31          <li>投資家情報</li>
32          <li>採用情報</li>
33          <li>次の100年へ</li>
34        </ul>
35  </header>
36  <div class="contents">
37 
38
39  </div>
40</body>
41</html>
42
43
44cssのソースコード
45
46li{list-style:none;
47float:left;
48padding:0px 20px;}
49h1{float:left;}
50.head2 p{float:left; padding: 20px;}
51.clear{clear:both;}
52
53.contents{
54  width:100%; height:50%;
55  background-image:url(./8a72c7daaf02fc6fd35a80a249f7e15062a230b4.jpg);
56  background-size:cover;
57}
58
59### 試したこと
60パスを何度も確かめ、高さを色々調整して試してみました。
61ファイルの階層を下に示します。
62sumi---
63　　　　|--sumitomo.html
64       |--　sumitomo.css
65       |--8a72c7daaf02fc6fd35a80a249f7e15062a230b4.jpg
66ここに問題に対して試したことを記載してください。
67contentsクラスが高さを持っていないことがchromeデベロッパーで分かり、高さを持たせたらうまくいきそうなので高さを持たせたいです。
68
69### 補足情報（FW/ツールのバージョンなど）
70visual studio code使用
71ここにより詳細な情報を記載してください。

m.ts10806

2020/09/10 22:56

コードのマークダウンが正しくできていません。 ```言語名コード ``` です。

m.ts10806

2020/09/10 22:57

ただ、「パスを確かめ」とあるだけでは他者にはその確認ができません。ファイル同士の階層の関連性、ファイル名が見える情報もご提示ください

m.ts10806

2020/09/11 00:27

投稿前にプレビュー確認を。正しくできればDaregadaさんの回答のようになります。

kazu1515

2020/09/11 00:31

何度も修正、すみません。macを使ってまして書類の中に上のような階層で保管しています。 Daregadaさんのを参考にしてみます。

m.ts10806

2020/09/11 00:58 編集

いえ、焦らず確実に対応してください。プレビュー見てできるまで投稿しないくらいが良いです（通知が来るので）下記の質問も参考に。 https://teratail.com/questions/238564

mari.rinn

2020/09/11 05:42

スマホからなのでよくわからないのですが <div class="contents"> </div> この空白行はただの空白行ですか？もしそうなら、 <div class="contents">　</div> このように、全角スペースで良いので(半角スペースはNG)入れてみてください。そうしないと何も表示されませんので。

kazu1515

2020/09/13 15:16

全角スペースを入れてみましたが、表示されませんでした。

m.ts10806

2020/09/13 21:17

コードのマークダウンが正しくできていません。 ```言語名コード ``` です。

kazu1515

2020/09/14 04:14

mari.rinnさんアドバイスの通り、全角スペースを入れたつもりでしたがきちんと入っていなく修正できました。また、ファイルが別の階層にも同じ名前で作られていてうまく表示されていなかったようで無事解決しました。自分では分からなかったので助かりました。ありがとうございました。

Daregada

2020/09/14 13:58 編集

「div要素に内容がないので、表示領域を確保するために全角空白を入れる」ってのはバッドノウハウの類じゃないかな。ページの構造として全角空白が必要か、後でちゃんとした(内容のある)要素を追加するときに邪魔にならないか、といった点で疑問がある。代わりに、CSSでdiv要素に対する幅と高さを明示的に確保すればいいのでは。

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

回答2件

CSSに以下を追加。

CSS
1html,
2body {
3    height: 100%;
4}

height - CSS: カスケーディングスタイルシート | MDN

パーセンテージパーセンテージは包含ブロックの高さ基準。包含ブロックの高さが明示されず（＝コンテンツの高さ依存の場合）、この要素が絶対位置指定されていないなら、値は auto になります。ルート要素で高さをパーセンテージ指定すると、初期包含ブロックに相対的になります。

.contentsに(表示画面に対する)パーセンテージで高さを指定するには、親要素のbody要素と、さらにその親要素のhtml要素の高さを初期値のautoから100%に変更することが必要。

補足:
「横並びにしたリスト(企業情報など)に背景画像がかぶってしまい(以下略)」という追加質問が予想されるので、「floatレイアウトはやめてflexレイアウトにしましょう」という解決策をあらかじめ提示しておく。

CSS
1html,
2body {
3    height: 100%;
4}
5
6.head2 {
7    display: flex;
8}
9
10.head2 p {
11    padding: 20px;
12}
13
14header ul {
15    display: flex;
16}
17
18header li {
19    list-style: none;
20    padding: 0px 20px;
21}
22
23.contents {
24    width: 100%;
25    height: 50%;
26    background-image: url(./8a72c7daaf02fc6fd35a80a249f7e15062a230b4.jpg);
27    background-size: cover;
28}