前提・実現したいこと
Airbnbの模写をしています。https://www.airbnb.jp/host/homes?_set_bev_on_new_domain=1591182041_YTU3NzBhMWNiMjQ4
背景画像の下に「なぜAirbnbでホスト?」から続けて書きたい。
でも背景の上に表示されてしまいます。
該当のソースコード
html
1<!doctype html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>模写コーティング</title> 6 <link rel="stylesheet" href="./style.css"> 7 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 8</head> 9<body> 10 <header> 11 <div class="container"> 12 <div class="wrapper"> 13 <ul class="nav"> 14 <img src="images/140717newairbnblogo.jpg" > 15 <li><a href="#">概要</a></li> 16 <li><a href="#">準備</a></li> 17 <li><a href="#">安全</a></li> 18 <li><a href="#">マネープラン</a></li> 19 </ul> 20 </div> 21 </div> 22 </header> 23 <div class="back-img"> 24 <button class="btn" type="button" onclick="location.href='移動先のファイルのパスを書く'">はじめる</button> 25 <div class="text-background"> 26 <div class="text"> 27 <section> 28 <h1 class="host">Airbnbホストになって、暮らしをレベルアップ</h1> 29 <p class="stay">宿泊施設の内容を記述</p> 30 </section> 31 <input type="text" class="address" value="大阪" size="35"> 32 <select name="name" class="plan"> 33 <option value="enteir_home">まるまる貸切</option> 34 <option value="private_room">個室</option> 35 <option value="share_room">シェアルーム</option> 36 </select> 37 <select name="many-peron" class="person"> 38 <option value="guest1">ゲスト1</option> 39 <option value="guest2">ゲスト2</option> 40 <option value="guest3">ゲスト3</option> 41 42 </select> 43 <button class="btn2" type="button" onclick="location.href='移動先のファイルのパスを書く'">はじめる</button> 44 </div> 45 </div> 46 </div> 47 48div.container { 49 margin-left: -15px; 50} 51/*左上の画像のフォント*/ 52img { 53 height: 40px; 54 width: 80px; 55 margin-top: 20px; 56} 57 58 59/*概要とかのところ*/ 60li a { 61 margin: -3em 0; 62 padding: 5em 1em; 63 display :block; 64 color:rgba(0, 255, 196, 1); 65} 66/*ボタンのところ*/ 67.btn{ 68 border-radius: 5px; 69 background-color: green; 70 padding-top: 10px; 71 padding-bottom: 30px; 72 text-align: center; 73 color: white; 74 position: relative; 75 bottom: 60px; 76 float: right; 77 right: 30px; 78 } 79 80.btn2 { 81 margin-top: 30px; 82 margin-bottom: 30px; 83 margin-left: 50px; 84 background-color: green; 85 padding: 20px; 86 text-align: center; 87 color: white; 88 width: 350px; 89 height: 20px; 90 border-radius: 5px; 91 padding-bottom: 30px; 92 padding-top: 10px; 93} 94 95 96/*背景画像のところ*/ 97.back-img { 98 width: 100%; 99 background-image:url('https://a0.muscache.com/4ea/air/v2/pictures/9d08d356-59b9-4ac4-9f41-5b9c13c2b211.jpg?t=n:ope,e:fjpeg-c75'); 100 background-size: cover; 101 position: absolute; 102 103 104} 105 106.host { 107 font-size: 40px; 108 margin-left: 40px; 109 margin-right: 40px; 110 padding: 10px; 111 font-weight: bold; 112 margin-top: 10px; 113} 114 115.stay { 116 margin-left: 50px; 117 font-weight: bolder; 118 border-style: initial; 119} 120 121.address { 122 margin-left: 50px; 123 margin-bottom: 20px; 124 border-radius: 10pxpx; 125} 126.plan { 127 margin-left: 50px; 128 border: ; 129 width: 40%; 130 height: 50px; 131} 132.person { 133 margin-left: 20px; 134 border: ; 135 width: 30%; 136 height: 50px; 137} 138.text-background { 139 background-color: white; 140 float: right; 141 max-width: 460px; 142 margin:78px 92px 143} 144 145.text-background2 { 146 background-color: white; 147 max-width: 460px; 148 margin:78px 92px 149}
### 試したこと 新たにdivタグを作りclassを指定して書いていこうとしましたが、背景と重なって表示されてしまいます。
コードのマークダウンできていません。
下記参考に。
https://teratail.com/questions/238564
>2時間ググりましたが
時間をかかれても伝わるものはありません。
「投入したキーワード」「参考にした記事URLなど」「試したこと」をセットで記載してください。
![guest](/img/icon/icnUserSample.jpg)
回答2件
あなたの回答
tips
プレビュー