背景画像を表示させたい

前提・実現したいこと

サイトの模写をしています。
トップのメインビューとして、背景画像をbackground-size: cover;の設定で表示させたいです。

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

画像が大きく拡大されているのに加え、上部の一部しか表示されず、coverの状態になりません。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
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    <meta name="description" content="このページは練習です。">
8
9    <title>title</title>
10
11    <link rel="preconnect" href="https://fonts.gstatic.com">
12    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
13
14    <link rel="stylesheet" href="./css/reset.css">
15    <link rel="stylesheet" href="./css/style.css">
16
17    <link rel="shortcut icon" href="" type="image/x-icon">
18</head>
19
20<body>
21    <header>
22        <div class="header-left">
23            <h1>title</h1>
24        </div>
25        <div class="header-right">
26            <ul class="header-nav">
27                <li class="nav-item"><a href="#about">about</a></li>
28                <li class="nav-item"><a href="#service">service</a></li>
29                <li class="nav-item"><a href="#contact">contact</a></li>
30            </ul>
31        </div>
32    </header>
33
34    <section id="top">
35        <div class="top-mv">
36            <p class="top-message">Design.</p>
37        </div>
38    </section>
39
40    <section id="about">
41        <div class="container">
42            <h2>About</h2>
43            <div class="about-message">
44                <p class="title">○○</p>
45                <p class="txt">○○</p>
46            </div>
47        </div>
48    </section>
49

CSS
1@charset "utf-8";
2
3/*=========================================
4共通部
5=========================================*/
6
7body {
8    font-family: 'Roboto', sans-serif;
9    font-size: 16px;
10    color: #141414;
11    line-height: 2;
12}
13
14a {
15    text-decoration: none;
16    color: #fff;
17}
18
19a:hover {
20    opacity: 0.7;
21    cursor: pointer;
22}
23
24.container {
25    width: 90%;
26    max-width: 980px;
27    margin: auto;
28}
29
30h2 {
31    font-size: 36px;
32    margin: 150px 0 70px 0;
33    text-align: center;
34}
35
36.title {
37    font-size: 24px;
38    font-weight: bold;
39    margin-bottom: 42px;
40}
41
42
43/*=========================================
44header
45=========================================*/
46
47header {
48    background: #1B1310;
49    color: #fff;
50    padding: 0 120px;
51    display: flex;
52    justify-content: space-between;
53}
54
55.header-right {
56    margin: auto 0;
57    margin-left: auto;
58}
59
60.header-nav {
61    list-style: none;
62    display: flex;
63}
64
65.nav-item {
66    padding-left: 55px;
67}
68
69
70/*=========================================
71top
72=========================================*/
73
74#top {
75    background-image: url(/img/fv-bgi@2x.jpg);
76    background-size: cover;
77    background-position: center;
78    color: #fff;
79}
80
81

試したこと

background-size: contain;にしてみると、小さく画像が表示されました。
sectionの後にdivクラスを作成し、background-imageに関するcssを設定してみましたが、同様の結果でした。
タグの閉じ忘れ、スペルミスをチェックしましたが、間違いがありませんでした。
「背景画像表示されない」「背景画像 cover　全表示されない」などのキーワードで、Googleとteratailで調べましたが、解決方法を見つけることが出来ませんでした。
画像ファイルの階層をチェックしましたが、間違いがありませんでした。
ほかの画像で試してみましたが、同様に大きく拡大・上部一部のみの表示になります。

補足

画像の詳細は以下の通りです。
種類：JPG
サイズ：493kb
大きさ：1440×740px
解像度：96dpi

環境は以下で行っています。
OS：Windows
ブラウザ：chrome
アクセスしているURL：VScodeのLiveViewからchromeに表示させています。（意味が違っていたらすみません。）

m.ts10806

2021/02/20 22:51 編集

「coverの状態」と仰っていますが、完成予想図はあるのでしょうか。「小さく画像が表示されました」とあるので「画像が表示されない」わけではないですよね（タイトルとの乖離）具体的な完成イメージを提示されたほうが良いかと思います。 coverが最良の選択肢とは限りませんし、既存回答で指摘されているように、一部だけで再現できるわけでも、対応できるわけでもありません。

m.ts10806

2021/02/20 22:52 編集

「どんな画像なのか」というのも提示されていません（解像度、サイズなど）

m.ts10806

2021/02/20 22:53

あともう1点。どのような環境ですか？ OS,ブラウザ,アクセスしているURL

退会済みユーザー

2021/02/20 23:16

多くの情報不足で申し訳ありません。完成イメージ、画像の詳細、環境を更新致しました。

m.ts10806

2021/02/20 23:19

>crome 細かいですがChromeですね。＞LiveView なるほど。完全に表示されないなら [/img/]と書かれているパスを疑ったのですが（ローカルのfile:///とかでアクセスしてないかとか）そのあたりの問題ではなさそうですね。

退会済みユーザー

2021/02/20 23:25

表記ミス、申し訳ありません。今後気を付けます。

m.ts10806

2021/02/21 01:33 編集

「今後」は「今」も入るので、今調整してください。細かいところですが、情報の確実性はアドバイスの的確さにもつながります。１つの表記ミスで色んなものが伝わらなくなるのです。

退会済みユーザー

2021/02/21 05:47

かしこまりました。ありがとうございました。

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

回答2件

ベストアンサー

contain
縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する
cover
縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する
というように書いているので画面いっぱいに表示したい場合表示される画面の大きさによって見え方が変わるので自動的に調節するために使用しています
ので横幅や高さは指定しないようです？

cssでの適用によって意図して画像や文字などが回り込まれないように上下のエリアを区切るためにclearfixという手法みたいなものがいくつかあるのでそういうものを使用するのも有効です

投稿2021/02/21 00:09

編集2021/02/21 00:11

siratama_neko

総合スコア72

http://www.htmq.com/css3/background-size.shtml
backgroundの説明です
cssのトラブルは前後のコードも影響があるのでできればページ全体のコードを載せていただけるとわかりやすくなります
Design.のところだけでしか画像が表示されていない場合
下のAboutのところが画像の上に表示されているため隠されていることがありますので下のところを見直してみるのもいいかもしれません

投稿2021/02/20 22:49

編集2021/02/20 22:53

siratama_neko

総合スコア72

退会済みユーザー

2021/02/20 23:24

ご回答ありがとうございます。参考URLを拝見させていただきました。再度コードを見直したのですが、contain指定のほうがよさそうですね。これまで同様のレイアウトを組んだ時には、widthやheightは指定せずとも綺麗に画面いっぱいに表示されていたのですが、参考URLにあるようにwidthとheightの指定をしたほうが確実でしょうか。また、まさにDesign.のところしか表示されていないので、About箇所が上に表示されているのかもしれません。これはz-indexで解決するのがベストでしょうか。

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

あなたの回答