teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

コードの追加

2020/04/23 00:40

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,77 @@
1
1
  ![イメージ説明](609c7efc977915c5844ac6446be437fb.png)
2
2
  ![![](fe1e931b2c0a174daa028bc74546b2f7.png)
3
3
  上の画像のようにサイズを縮めたら、背景画像も縮小されるようにしたいのですが、下の画像のようになってしまいます。
4
- どうしたらいいのでしょうか。
4
+ どうしたらいいのでしょうか。
5
+ ```html
6
+ <section id="ooki">
7
+ <div id="cover">
8
+ <div id="host">
9
+ <h3>Airbnbホストになっ<br>て、暮らしをレベルア<br>ップ</h3>
10
+ <p id="mu">どれくらいの収入が見込めるかチェック</p>
11
+ <p><input type="text" value="東京"></p>
12
+ <div id=nai>
13
+ <p><select>
14
+ <option value="1">まるまる貸切</option>
15
+ <option value="2">個室</option>
16
+ <option value="3">シェアルーム</option>
17
+       </select>
18
+ </p>
19
+ <p>
20
+ <select>
21
+ <option value="1">ゲスト1人</option>
22
+ <option value="2">ゲスト2人</option>
23
+ <option value="3">ゲスト3人</option>
24
+ <option value="4" selected>ゲスト4人</option>
25
+ <option value="5">ゲスト5人</option>
26
+ <option value="6">ゲスト6人</option>
27
+ <option value="7">ゲスト7人</option>
28
+ <option value="8">ゲスト8人</option>
29
+ <option value="9">ゲスト9人</option>
30
+ <option value="10">ゲスト10人</option>
31
+ <option value="11">ゲスト11人</option>
32
+ <option value="12">ゲスト12人</option>
33
+ <option value="13">ゲスト13人</option>
34
+ <option value="14">ゲスト14人</option>
35
+ <option value="15">ゲスト15人</option>
36
+ <option value="16">ゲスト16人</option>
37
+ </select>
38
+ </p>
39
+ </div>
40
+ <h3 id="hu">¥100,361<span>月あたり</span></h3>
41
+ <button>はじめる</button>
42
+ </div>
43
+ </div>
44
+ </section>
45
+ ```
46
+ ```css
47
+ #cover {
48
+ margin: 0 auto;
49
+ height: 661px;
50
+ width: 1725px;
51
+ background-image: url("../images/o7.jpg");
52
+ background-repeat: no-repeat;
53
+ background-size: cover;
54
+ }
55
+
56
+ #host{
57
+ position: relative;
58
+ top: 100px;
59
+ left: 1100px;
60
+ margin:0;
61
+ padding:0;
62
+ background: white;
63
+ border-radius: 1%;
64
+ width: 500px;
65
+ text-align: center;
66
+ height: 500px;
67
+ }
68
+
69
+ #host h3{
70
+ font-size: 40px;
71
+ margin: 0 auto;
72
+ }
73
+
74
+ #ooki{
75
+ padding-top: 90px;
76
+ }
77
+ ```