背景画像が縮小されてしまいます

![
上の画像のようにサイズを縮めたら、背景画像も縮小されるようにしたいのですが、下の画像のようになってしまいます。
どうしたらいいのでしょうか。

html
1<section id="ooki">
2		<div id="cover">
3		<div id="host">
4		<h3>Airbnbホストになっ<br>て、暮らしをレベルア<br>ップ</h3>
5		<p id="mu">どれくらいの収入が見込めるかチェック</p>
6		<p><input type="text" value="東京"></p>
7		<div id=nai>
8		<p><select>
9			<option value="1">まるまる貸切</option>
10			<option value="2">個室</option>
11			<option value="3">シェアルーム</option>
12　　　　　　</select>
13        </p>
14        <p>
15        	<select>
16        		<option value="1">ゲスト１人</option>
17        		<option value="2">ゲスト２人</option>
18        		<option value="3">ゲスト３人</option>
19        		<option value="4" selected>ゲスト４人</option>
20        		<option value="5">ゲスト５人</option>
21        		<option value="6">ゲスト６人</option>
22        		<option value="7">ゲスト７人</option>
23        		<option value="8">ゲスト８人</option>
24        		<option value="9">ゲスト９人</option>
25        		<option value="10">ゲスト１０人</option>
26        		<option value="11">ゲスト１１人</option>
27        		<option value="12">ゲスト１２人</option>
28        		<option value="13">ゲスト１３人</option>
29        		<option value="14">ゲスト１４人</option>
30        		<option value="15">ゲスト１５人</option>
31        		<option value="16">ゲスト１６人</option>
32        	</select>
33        </p>
34        </div>
35        <h3 id="hu">￥100,361<span>月あたり</span></h3>
36        <button>はじめる</button>
37    </div>
38    </div>
39    </section>

css
1#cover {
2	margin: 0 auto;
3	height: 661px;
4	width: 1725px;
5	background-image: url("../images/o7.jpg");
6	background-repeat: no-repeat;
7	background-size: cover;
8}
9
10#host{
11	position: relative;
12	top: 100px;
13    left: 1100px;
14    margin:0;
15    padding:0;
16	background: white;
17    border-radius: 1%;
18    width: 500px;
19    text-align: center;
20    height: 500px;
21}
22
23#host h3{
24	font-size: 40px;
25	margin: 0 auto;
26}
27
28#ooki{
29	padding-top: 90px;
30}

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

回答1件

ベストアンサー

背景画像を指定した要素に
background-size: cover;を指定するとOKだと思います。

追記:
画面サイズからはみ出て横方向のスクロールが出てしまう、ということなのであれば以下です。

CSS
1#cover {
2  max-width: 100%; /* もしくは「100vh」 */
3}

追記: 画面幅が、以下の数値を上回ると、おそらく右側に隙間が出るはずです。
「1100px + 500px」

以下のように設定してみてください。

CSS
1#host {
2    position: relative;
3    top: 100px;
4    
5    /* left: 1100px; */
6    margin: 0 40px 0 auto; /* 40pxは右側の余白です。好きなように設定してください。 */
7    
8    background: white;
9    border-radius: 1%;
10    width: 500px;
11    text-align: center;
12    height: 500px;
13}