なぜBackground-imageプロパティを設定していないクラスのプロパティの影響を受けるのか

###疑問

どうしてContainerクラスに、以下のプロパティを設定すると、背景写真の位置が変わってしまうのか
理解できません。

top-wrapperで写真などを設定しているから、containerクラスには関係ないのでは？と疑問が浮かんでいます。

どうして背景写真のURLを持っていないクラスのプロパティで、背景写真の大きさが変わるのでしょうか？

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>Progate</title>
6    <link rel="stylesheet" href="stylesheet.css">
7  </head>
8  <body>
9    <header>
10    </header>
11    <div class="top-wrapper">
12      <!-- ここにコードを書いていきましょう -->
13      <div class="container">
14        <h1>LEARN TO CODE.</h1>
15        <h1>LEARN TO BE CREATIVE.</h1>
16        <p>Progateはオンラインプログラミング学習サービスです。</p>
17        <p>初心者にもやさしいスライドとレッスンで、Webサービスを作りながらプログラミングを学んでいきましょう。</p>
18      </div>
19    </div>
20    <div class="lesson-wrapper">
21    </div>
22    <div class="message-wrapper">
23    </div>
24    <footer>
25    </footer>
26  </body>
27</html>
28

CSS
1body {
2  margin: 0;
3  font-family: "Hiragino Kaku Gothic ProN";
4}
5
6a {
7  text-decoration: none;
8}
9
10/* containerクラスのCSSを指定してください */
11.container
12  {
13    width:1170px;
14    padding:0px 15px;
15    margin:0px auto;
16    
17  }
18
19
20/* top-wrapperクラスのCSSを指定してください */
21.top-wrapper
22  {
23    padding:180px 0 100px 0;
24    background-image:url(https://prog-8.com/images/html/advanced/top.png);
25    background-size:cover;
26    color:white;
27  }
28
29
30

Lhankor_Mhy

2021/07/29 06:57

「以下のプロパティ」とは、具体的にはどれのことですか？

yuukaMinami

2021/07/29 07:27

CSSに記載されているContainerクラスのプロパティです。 .container { width:1170px; padding:0px 15px; margin:0px auto; }

Lhankor_Mhy

2021/07/29 07:30

問題が再現しませんでした。ご提示のコードから、 .container { width:1170px; padding:0px 15px; margin:0px auto; } を削除しても背景画像の位置は変わりませんでした。問題が再現するコードをご提示ください。

yuukaMinami

2021/07/29 07:43 編集

画像の位置はズームされて、大きく表示されるようになりませんでしたか？私はなったのですが、、。

Lhankor_Mhy

2021/07/29 07:57

ご提示のコードだけでですか？提示されているもの以外に、CSSのルールも要素もスクリプトもないのですよね？そうだとすると、当方では問題が再現しませんでした。環境をご提示いただいた方がいいかもしれませんね。

Lhankor_Mhy

2021/07/29 08:10

ちなみに、当方の環境は、Win10 Firefox90 と Chrome92 です。スクリーンサイズは1920pxでテストしました。

Lhankor_Mhy

2021/07/29 08:13

もしかして、モバイルで見てますか？

Lhankor_Mhy

2021/07/29 08:18

あー、わかりました。スクリーンサイズに条件があるのですね。問題を把握しました。

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

回答2件

ベストアンサー

まず、前提ですが、ブロックレイアウトにおいてブロックの高さは成り行きです。

つまり、.top-wrapper .containerなどの高さは、中身によって決まっています。
中身が増えると高さが増え、中身が減ると高さが減ります。

次の前提ですが、tmykさんのご回答にあるとおり、background-size: coverは要素のサイズに合わせて背景画像の拡大率を変えます。
ですので、前述の前提により、中身の増減によって背景画像の見え方が異なってくる、ということです。

もうわかったかと思いますが、width:1170pxの有無によって、中身のp要素の幅も変わってくるため、内部のテキストである「初心者にもやさしいスライドとレッスンで、Webサービスを作りながらプログラミングを学んでいきましょう。」などに折り返しが発生する場合があります。
折り返しが発生した場合、当然に行が増えますから、高さが増えるということになり、.top-wrapperの中身の高さが増えたということですから、背景画像の見え方が異なってきます。

以上が原因です。

これを確認するには、width:1170pxを消した状態でウィンドウを拡大縮小してみることです。
おそらく、文字の折り返しが変わる瞬間に背景画像がガクンと動くはずです。

投稿2021/07/29 08:26

編集2021/07/29 08:29

Lhankor_Mhy

総合スコア36163