Webページでバックグラウンドが正しく表示されません。

Webページの制作を行ったのですが、

「画面を縮小すると、header以外でbackgroundが左端から一部しか表示されない」

です。

CSSのコードは以下の通りで、topクラスでもwidthをいじりましたが解決しませんでした。なお、header、main、footer全てに対して、containerクラスで、両横のpaddingは与えています。

また、画像は1600x900ですが、main内の画像を指定していないバックグラウンド（色のみ）の部分も見切れてしまいます。

どのようにすればページの横幅いっぱいまで、backgroundを表示させられますか？

<header>
  <div class="container">
    <div class="logo">
      <a href="#"><img src="images/freak-logo.png" alt=""></a>
    </div>
    <ul class="header-menu">
      <li><a href="#">グループ紹介</a></li>
      <li><a href="#">企業情報</a></li>
      <li><a href="#">IR</a></li>
      <li><a href="#">ニュース</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
    <div class="header-language-menu">
      English
    </div>
  </div>
</header>
  
<div class="top" style="">
    <div class="container">
      <h1>Give People Work <br>That Requires A Person</h1>
      <h2>人に人らしい仕事を</h2>
    </div>
  </div>

header{
  width: 100%;
  position: fixed;
  height: 50px;
  background: black;
  color:white;
  float:left;
}

.top{
  text-align: center;
  background:url("../images/top-image.png");
  background-size: cover;
  padding-top: 50px;
}

kei344

2017/09/29 03:10

HTMLと画像の縦横ピクセルを提示ください。

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

回答2件

ベストアンサー

状況がちょっとつかめませんが、こういうことでしょうか。

CSS
1.top{
2  text-align: center;
3  background:url("https://placehold.jp/24/99cc99/339933/1600x900.png");
4  background-size: cover;
5  padding-top: 50px;
6  /* ADD */
7  background-position: center;
8}
9```**動くサンプル：**[https://jsfiddle.net/hkqwmx0r/1/](https://jsfiddle.net/hkqwmx0r/1/)