背景画像の表示領域を調整したい

背景画像に指定している写真はもっと上まであるのですが、何故か削れてしまいます。
（人の頭の上の画像が消えている）

コード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
7  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
8  <link rel="stylesheet" href="style.css">
9  <link rel="stylesheet" href="responsive.css">
10  <link rel="icon" href="img/airbnb_logo.ico">
11  <title>Airbnbでお家、アパート、お部屋をシェアしよう</title>
12</head>
13<body>
14
15<header>
16  <div class="header-contents">
17
18    <div class="header-left">
19      <div class="header-logo">
20        <a href="#"><img src="img/airbnb_logo.png"></a>
21      </div>
22      <div class="header-menu">
23        <ul>
24          <li><a href="#" id="color">基本情報</a></li>
25          <li><a href="#">準備</a></li>
26          <li><a href="#">安全対策</a></li>
27          <li><a href="#">マネープラン</a></li>
28        </ul>
29      </div>
30    </div>
31
32    <div class="header-right">
33      <p class="gessyu">予想月収</p>
34      <div class="maru">
35        <div><a href="#">?</a></div>
36      </div>
37      <p class="yen">¥ 182,875</p>
38      <div class="header-button">
39        <a href="#">はじめる</a>
40      </div>
41    </div>
42
43  </div>
44</header>
45
46<div class="top-wrapper">
47
48</div>
49
50
51
52<p>試用の改行</p>
53<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
54
55
56  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
57  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
58  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
59</body>
60</html>
61

CSS
1* {
2  box-sizing: border-box;
3}
4
5body {
6  margin: 0;
7  font-family: "Hiragino Kaku Gothic ProN", sans-serif;
8}
9/* -------header----------- */
10header{
11  z-index: 10;
12  position: fixed;
13  top:0;
14  width: 100%;
15  background-color: white;
16  height: 80px;
17}
18.header-contents{
19  display: flex;
20  justify-content: space-between;
21  width: 85%;
22  margin: 30px auto 0;
23}
24/*------------header-left--------------------  */
25.header-left{
26  display: flex;
27}
28.header-logo img{
29  width: 31px;
30  height: 32px;
31}
32
33.header-menu ul{
34  width: 400px;
35  display: flex;
36  justify-content: space-around;
37  padding-left: 20px;
38}
39.header-menu li{
40  list-style-type: none;
41}
42.header-menu a{
43  font-weight: 600;
44  font-size: 14px;
45  color: #484848;
46}
47#color{
48  color: #008489;
49  border-bottom: 2px solid #008489;
50  padding-bottom: 26px;
51}
52/*-------------header-right--------------------  */
53.header-right{
54  display: flex;
55}
56.gessyu{
57  font-weight: 400;
58  font-size: 14px;
59  color: #484848;
60  line-height: 37px;
61}
62.maru {
63  display: inline-flex;
64  justify-content: center;
65  align-items: center;
66  border-radius: 50%;
67  flex-flow: column;
68  vertical-align: top;
69  width: 14px;
70  height: 14px;
71  border: 1px solid #484848;
72  font-size: 0.1em;
73  line-height: 0.1em;
74  margin: 12px 10px 0 6px;
75}
76.maru a{
77  text-decoration: none;
78  color: #484848;
79}
80.yen{
81  font-weight: 800;
82  font-size: 20px;
83  color: #484848;
84  margin-right: 10px;
85}
86.header-button a{
87  background-color: #DA3742;
88  color: white;
89  padding: 10px 13px;
90  border-radius: 4px;
91}
92/* ----------------top-wrapper-------------- */
93.top-wrapper{
94  background-image: url(img/picture1.jpg);
95  height: 800px;
96  width:100%;
97  background-size: cover;
98  background-clip: content-box;
99}
100

デベロッパーツールで見ると、
headerの　 background-color: white;　が関係しているのでしょうか？

ですが、これを削除してしまうと、

このようになってしまいます。
それか position: fixed;　も関係してそうです。

実現したい事は、
「headerの表示領域（白背景含め）を保ちつつ、下の背景画像も頭上まで表示させたい」のです。

下記追記内容

試した事

.top-wrapper {}

の中に、

  margin-top: 80px;

を追加すると、

このように、背景画像の表示領域で頭上全て表示されます。

ですが、「何故」　margin-top　を指定しなければ表示されないのかがわかりません。
headerの真下に背景画像入れているのにも関わらずです。
何故、headerと被ってしまうのか、また、その解決策は　margin-top　指定する事以外にあるのかを教えてください。

以上、よろしくお願いします。

p.s.
「丸投げ質問」という通知が3名ほどからあったらしいですが、
これのどこが「丸投げ質問」なのでしょうか？
「実現したい事」も記載しているのですがね。
「試した事」記載していなかったからでしょうか？
単純にわからないから、投稿し且つ「現状」と「実現したい事」も記載しているのに、何故このような「丸投げ質問」という意味不明な通知が来なければならないのか。
あまり人のこと言いたくはありませんが、他の質問はもっと酷い（私の主観）のあると思いますが？
あくまで私の主観だが、どう見てもこの私の質問はただの「丸投げ」とは思えないのですがね。客観的に見ても。
嫌味なシステムですね...。
その「丸投げ質問」と断定してくれた3、4名は「何がどう具体的にどうだから」丸投げと主観で決めつけたのかを是非とも教えて欲しい。
こちとらまぁまぁ時間かけて質問書いてるんですわ。
あまりにも酷い質問ならそう言われても致し方ないが。若葉マークつければ良かったのか？

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

回答1件

ベストアンサー

パッと見ですが、「background-size: cover;」がどのように背景画像を配置するのか理解されると良いかと思います。

background-size

-追記-

「fixed」は「absolute」や「float」みたいに「浮いている」と思ってください。その下に空白があるので、潜りこんでいる状態です。

解消するには、一般的には質問者さんと同じくマージン付与ですが、他には、同じ大きさのdiv（中身は空っぽ）でも対応可能です。

※「float」とは違うので「overflow: hidden;」等のような対策は取れません。

投稿2019/04/01 03:32

編集2019/04/01 04:11

yoshinavi

総合スコア3523

退会済みユーザー

2019/04/01 03:39

ちょうどたった今、質問を追記したところであります。 mdn は非常にわかりずらいので、見ても理解がしにくいと思っています。

yoshinavi

2019/04/01 03:57

画像にはアスペクト比（縦と横の比率）があるので、その比率を崩しても範囲に合わせるのか、その範囲内で納めるのか、その比率を保ったまま範囲を覆うように（余白を出さないように）して余剰分はカットするのか、等を決めるのがこの要素です。色んな解説サイトがありますので、理解し易い所でプロパティ値を変えてみてください。参考： http://www.tohoho-web.com/css/prop/background-size.htm

退会済みユーザー

2019/04/01 07:02

なるほどですね、私の対応策で良かったのですね。追記して頂いた内容がわかりやすくて、すぐ理解できました。ありがとうございます。

yoshinavi

2019/04/01 12:08

最初は私が勘違いして、違う回答をしてしまいスミマセン。＞mdn は非常にわかりずらいので･･･ →　先ずはここ（MDN）で確認したり、根拠と言える所なので、分かりにくい場合は、このサイトの単語等を基に、検索を掛けて、理解しやすいサイト等と合わせて確認されると良いかと思います。解決されて何よりです。 (^^)

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