画像を横幅いっぱいに背景として表示させるには

Question

解決したいこと

3000 × 1983の画像をwebページの一番上に背景として貼り付け、横幅いっぱいに表示させたいのですが、
画像の一部をトリミングして表示されてしまいます。どうしたら良いか教えていただきたいです。

表示させたいのは下の写真です。

試したこと

<div id="container">
 <div id="main_img">
   <div id="main_img_inner">
     <h1>時のはざまでほっとひといき</h1>
   </div>
 </div>
</div>

body{
  width:100%;
  font-family: "Hiragino sans",sans-serif;
  color:pink;
}
#container{
  width: 970px;
  margin:0 auto;
}
#main_img{
  display: table;
}
#main_img_inner{
  width:1440px;
  height:1020px;
  background: url("./images/cafe_main.jpg") no-repeat;
}

このように表示されます。
{
width: 100%;
height: auto;
}

だと画像は全く表示されませんでした。

縦横比が変わるわけではなく
このようにトリミングされてしまうのは何故でしょうか？

Answer 1

background-repeat: no-repeat;だからですよ
background-size: coverを追加してください

Comments

[dazingcat]

ありがとうございます！即座に思った通り表示できました。覚えておきます！