背景画像を画面内に収めたい

背景画像を画面内に収めたいです。
現段階では、画像が収まりきらず左にスライドできる余裕がある状態です。

写真１の状態から

写真２の状態まで左にスライドして収まっていなかった右側のスペースが表示されるようになってしまいます。
試したこと:
background-size: cover;
background-attachment: fixed;
background-position: center;
結果はどれも同じで、スライドできる余裕が残ってしまいます。

左右に画面外にはみ出るスペースを無くし、画像全体が画面内に収まるようにしたいです。
完成形としては,
このようになることをイメージしています。

html
1    <main>
2      <div class="main-image">
3          <div class="container container-image">
4              <h1>旅を贈ろう。</h1>
5              <p>Airbnbギフトカードで、世界をぐんと身近に</p>
6              <a href="" class="text-dark gift-register">ギフトカードを登録</a>
7          </div>
8      </div>
9    </main>

css
1.main-image {
2  background-image: url('../img/main_img.jpg');
3  background-size: cover;
4  height: 600px;
5  color: #fff;
6}

※コードは一部省いています。

Lhankor_Mhy

2019/02/28 08:39

.main-image の width はどのように設定されていますか？　設定されいない場合、祖先要素の width はどうなっていますか？

gakukozuki

2019/02/28 08:42

widthは設定していないです。質問内容に表記するのを忘れていましたが、width100%の結果も同じでした。

yoshinavi

2019/03/01 05:32

関連するCSSが全て提示されないと「推測」しかできません。「推測」すると、指定CSSのプロパティが適切でない、としか言えません。

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

回答1件

html
1    <main>
2      <div class="main-image">
3        <div class="main-content text-white">
4          <h1 class="font-weight-bold">旅を贈ろう</h1>
5          <br>
6          <p class="only">Airbnbギフトカードで、世界をぐんと身近に</p>
7          <br>
8          <a href="/" class="font-weight-bold gift-register text-muted py-3 px-3">ギフトカードを登録</a>
9        </div>
10      </div>
11    </main>```
12
13```.main-image {
14  background-image: url('../img/main_img.jpg');
15  background-size: cover;
16  height: 600px;
17}