レスポンシブデザインで背景画像をちゃんと表示したい

背景画像をレスポンシブデザインに対応させたくてbackgroundプロパティを指定したのですがうまくいきません。
そうすればちゃんと表示できるのでしょうか？
表示させたい画像

私のパソコンの画面

コード

<!doctype html> <html lang="ja"> <head>  <meta name="viewport" content="width=device-width, initial-scale=1">  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <link rel="stylesheet" href="reset.css">  <link rel="stylesheet" href="css/stylesheet.css"> <link href="stylesheet.css" rel="stylesheet" type="text/css">  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="no2.js"></script>  <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&subset=japanese" rel="stylesheet"> <title>Airbnbの模写</title> </head> <body> <header> <div class="header-btn"> <div class="search"> <i class="fas fa-search"></i> <p>探す</p> </div> </div> <div class="nav"> <ul> <li>ホストをはじめる</li> <li>ヘルプ</li> <li>登録する</li> <li>ログイン</li> </ul> </div> </header> <div class="top-content" id="top"> <p class="fixed-bar"> <i class="far fa-comment-dots fa-2x"></i> <span>今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。 </span> </p> <div class="container"> <h1>旅を贈ろう。</h1> <p>Airbnbギフトカードで、世界をぐんと身近に</p> <a href="#">ギフトカードを登録</a> </div> </div> <div class="main"> <div class="container"> <h1>いつも完璧な贈りもの</h2> <div class="menu"> <div class="gift"> <i class="far fa-envelope fa-3x"></i> <p>簡単に使える</p> <p>ギフトカードはメールで届きます。Airbnbア<br>カウントへのギフト登録も超かんたん。</p> </div> <div class="stopwatch"> <i class="fas fa-stopwatch fa-3x"></i> <p>有効期限なし</p> <p>Airbnbギフトカードは無期限。だから友達も<br>時間をかけて旅をプランできます。</p> </div> <div class="globe"> <i class="fas fa-globe fa-3x"></i> <p>忘れられない旅</p> <p>お家は100万件以上あるので、ずっと住みた<br>いと憧れていた街の暮らしも叶います。</p> </div> </div> </div> </div> <footer> <div class="container"> <div class="top-contents"> <div class="airbnb"> <p>Airbnb</p> <ul> <li><a href="#">採用情報</a></li> <li><a href="#">ニュース</a></li> <li><a href="#">ポリシー</a></li> <li><a href="#">ヘルプ</a></li> <li><a href="#">ダイバーシティ&ビロンギング</a></li> <li><a href="#">アクセシビリティ対応<span>新着</span></a></li> <li><a href="#">企業情報</a></li> </ul> </div> <div class="recommend"> <p>スタッフのおすすめ</p> <ul> <li><a href="#">信頼&安全</a></li> <li><a href="#">お友達紹介クーポン</a></li> <li><a href="#">Airbnb Citizen</a></li> <li><a href="#">出張</a></li> <li><a href="#">アクティビティ<span>新着</span></a></li> <li><a href="#">Airbnbmag</a></li> </ul> </div> <div class="hosting"> <p>ホスティング</p> <ul> <li><a href="#">ホストになる理由</a></li> <li><a href="#">おもてなしの心</a></li> <li><a href="#">ホストの責任</a></li> <li><a href="#">コミニュニティセンター</a></li> <li><a href="#">体験を掲載<span>新着</span></a></li> <li><a href="#">オープンホーム</a></li> </ul> </div> <div class="sns"> <div class="logo"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> </div> <ul> <li><a href="#">利用規約</a></li> <li><a href="#">プライバシー</a></li> <li><a href="#">サイトマップ</a></li> </ul> </div> </div> <div class="bottom-contents"> <div class="footer-left"> <a href="#">Airbnb Grobal Services Limited</a> <a href="#">観光庁長官(01)第S0001号(2018年6月15日-2023年6月14日)</a> <a href="#">© 2019 Airbnb, Inc. All rights reserved.</a> </div> <div class="footer-right"> <div class="btn">日本語</div> <div class="btn">JPY-¥</div> </div> </div> </div> </footer> </body> </html>

/*共通部分*/
a{
  text-decoration:none;
}
li{
  list-style:none;
}
body {
  margin: 0px;
}

/*ヘッダー*/
header{
  height:60px;
  padding:25px 20px 0  80px;
  display:flex;
  justify-content:space-between;
}
.search{
  width:458px;
  height:46px;
  border:1px solid #EBEBEB;
  box-shadow:0 2px 4px #EBEBEB;
}
.search .fas{
  padding:15px 0 15px 20px;
}
.search p{
  display:inline;
  color:#767676;
}
.nav ul{
  display:flex;
}
.nav li{
  margin-left:20px;
  color:#484848;
  font-size:14px;
  font-weight:bold;
}

/*固定されたバーがある所*/
#top {
  background-image:url(img1.jpg);
  background-size:contain;
  min-height:100vh;
}
.fixed-bar{
  position:fixed;
  z-index:16;
  margin-top:0;
  width:100%;
  font-size:14px;
  height:50px;
  padding-top:20px;
  background-color:#C2E4E6;
  color:#484848;
  text-align:center;
}
.fixed-bar .far{
  display:inline-block;
  margin-right:10px;
  vertical-align:middle;
}
.fixed-bar span{
  vertical-align:top;
}
.top-content h1{
  padding-top:220px;
  font-size:46px;
  font-weight:bold;
  color:#fff;
}
.top-content>.container>p{
  font-size:18px;
  color:#fff;
}
.top-content>.container>a{
  font-size:16px;
  color:#484848;
  background-color:#fff;
  padding:10px 20px;
  display:inline-block;
  border-radius:5px;
}
/*「いつも完璧なおくりものの所」*/
.main{
  padding-top:20px;
}
.menu{
  display:flex;
  justify-content:space-around;
}
.main h1{
  text-align:center;
}
.gift,.stopwatch,.globe{
  text-align:center;
}
.gift .far,.stopwatch .fas,.globe .fas{
  color:#307B87;
}
.gift>p:nth-child(2),.stopwatch>p:nth-child(2),.globe>p:nth-child(2){
  font-size:18px;
  color:#484848;
  font-weight:bold;
}
.gift>p:nth-child(3),.stopwatch>p:nth-child(3),.globe>p:nth-child(3){
  font-size:16px;
  color:#767676;
}

/*フッター*/
.container{
  max-width:1032px;
  margin:0 auto;
}
.top-contents{
  display:flex;
  border-bottom:1px solid #EBEBEB;
}
.top-contents ul{
  padding-left:0;
  font-size:14px;
}
.top-contents>.sns{
  padding-top:10px;
}
.airbnb{
  margin-right:80px;
}
.recommend,.hosting{
  margin-right:120px;
}

.airbnb>p,.recommend>p,.hosting>p{
  font-weight:bold;
}
.airbnb ul>p{
  display:inline-block;
}
.airbnb>ul>li>a,.recommend>ul>li>a,.hosting>ul>li>a{
  color:#767676;
  display:block;
}
.airbnb span,.recommend span,.hosting span{
  display:inline-block;
  padding:0 2px;
  border-radius:6px;
  background-color:#2A6A70;
  font-size:12px;
  color:#fff;
  margin-left:10px;
}
.sns a{
  color:#767676;
  margin-right:20px;
}
.sns li{
  color:#767676;
}
.bottom-contents{
  display:flex;
  justify-content:space-between;
  padding:20px 0 40px 0;
}
.footer-left{
  font-size:14px;
}
.footer-left a{
  display:block;
  color:#767676;
}
.footer-right{
  color:#767676;
  font-size:14px;
}
.footer-right .btn{
  display:inline-block;
  padding:7px;
  border:1px solid #F2F2F2;
  margin-top:10px;
  margin-left:10px;
}
.footer-right .btn:hover{
  background-color:#767676;
}


/*メディアクエリ*/
@media(max-width:559px){
  /*ヘッダー*/
  header{
    padding-left:10px;
  }
  header>.nav{
    display:none;
  }
  .fixed-bar{
   height:100px;
   
  }
   .fixed-bar span{
    
   }
  
  /*フッター*/
  .top-contents{
    display:none;
  }
}

naomi3

2019/10/20 08:55

「no2.js」というJavaScriptを用いられているようですが、JavaScriptがありません。

kyohaya

2019/10/20 09:00

解答ありがとうございます、まだjQueryを実装していないので記述はありません。

naomi3

2019/10/20 09:06

わかりました。 cssへのリンク（3本）が切れているのも、未使用でしょうか？

kyohaya

2019/10/20 09:09

stylesheet.cssのみ使っていて質問で貼ってあるコードです。

naomi3

2019/10/20 09:17

わかりました。 background-size:contain;　ではなく、固定長にすればできそうですが、「ちゃんと表示」したことにならないのですか？

退会済みユーザー

2019/10/20 14:24

まだ、解決済みになってはいなかったのですが、まだ問題点があるという事でしょうか？高評価だけを押すのではなく、試した所どのようになったのかや〜を試してみたなど、コメントしてくださると、解決済みへの近道になるのではないでしょうか？今、あなたが何をしたく。どのような問題が発生しているかは、問題提示してくれなければわかりません。

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

回答3件

CSS
1#top {
2  background:url(img1.jpg) no-repeat;
3  background-size:cover;
4  min-height:100vh;
5}

backgrouns-sizeの「contain」は、指定した範囲に背景画像をおさめる指定です。
background-sizeの「cover」は、指定した範囲をカバーするように背景画像を伸縮させる指定です。

投稿2019/10/21 09:40

m_o

総合スコア109

直接の回答ではありませんが、、

まず、コードの掲載は、Mark downでの表記が推奨されていますので、そちらを使用してみるとより見やすい質問となり、回答がえやすいと思います。

回答

掲載してもらった画像を見る限り、何回も背景画像が表示していますね。これは、以下のコードで繰り返しを禁止することができます。

css
1background-repeat: no-repeat;

background-repeatプロパティは、背景画像のリピートの仕方を指定する際に使用します。

投稿2019/10/20 09:24

退会済みユーザー

総合スコア0

レスポンシブデザインの場合、画像のうまく表示されないミスは高さの指定だと思います。
少なくとも私の経験上はそうでした・・。
なのでheightの指定をやめてpadding-topの計算式を使うと良いですよ。
スマホにもいろんな横幅がありますが、この計算式ならどんな横幅にもぴったりはまります。

なんでそうなるの？って考えるよりかは、まずはおまじないのように使ってみるのが良いと思います＾＾

css
1    height: 0
2    background: url(画像パス) no-repeat
3    background-size: contain
4    padding-top: (表示画像の高さの数値 / 表示画像の幅の数値)*100%　←を計算した数値（%）を入力

投稿2019/10/21 09:35

takamiii_158cm

総合スコア84

kyohaya

2019/10/22 05:54 編集

回答ありがとうございます。試したら画像がなくなったのですがどうすればいいでしょうか？記述はこうしました。 #top { height: 0; background: url(img1.jpg) no-repeat; background-size: contain; padding-top: (900px/1480px)*100%; }

退会済みユーザー

2019/10/22 06:33 編集

（）内は数値のみとtakamiii_158cmさんは書いています。よって、900pxなら900と数値のみを書くべきです。よって、padding-top: (900/1480)*100%;　にしてはどうでしょうか？ --- 合わせて）画像パスは的確なものでしょうか？　-画像パスが違うと勿論表示されません。