背景画像の表示ができない

サイトの模写をしているのですが、
bootstrap,　htmlでクラスを指定して、CSSでurlを書いたのに画像が表示されません。なぜでしょうか。コード載せます。

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
   <title>Bootstrapの練習</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">  
   <link rel="stylesheet" href="css/bootstrap.css">
   <link rel="stylesheet" href="css/Bootstrap-practice.css">
   <script type="text/javascript" src="js/jquery-3.5.0.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.js"></script>
   <link href="https://fonts.googleapis.com/css2?family=Jost&family=Montserrat&display=swap" rel="stylesheet">

  </head>
<body>
<h1></h1>
  <button type="button" class="btn btn-default">概要</button>
  <button type="button" class="btn btn-default">準備</button>
  <button type="button" class="btn btn-default">安全</button>
  <button type="button" class="btn btn-default">マネープラン</button>
  <div class="text-right pr-5">
    <button type="submit" class="btn btn-danger">はじめる</button>
    </div>
    <div class="background-image">

      <div class="row justify-content-end">
        <div class="border col-5">
          <br>
          <h1 class="font-weight-bold">Airbnbホストになって、暮らしをレベルアップ</h1>
          <h2 class="size1"><b>宿泊施設の内容を記入</b></h2>
          <br>
          <div class="row clear_form">
            <div class="col-md">
              <form>
                <div class="form-group">
                  <input type="text" class="form-control">
                  <div class="d-flex">
                    <select class="form-control w-50">
                      <option>まるまる貸切</option>
                      <option>個室</option>
                      <option>シェアルーム</option>
                    </select>
                  <select class="form-control w-50">
                      <option>ゲスト1人</option>
                      <option>ゲスト2人</option>
                      <option>ゲスト3人</option>
                      <option>ゲスト4人</option>
                      <option>ゲスト5人</option>
                      <option>ゲスト6人</option>
                      <option>ゲスト7人</option>
                      <option>ゲスト8人</option>
                      <option>ゲスト9人</option>
                      <option>ゲスト10人</option>
                      <option>ゲスト11人</option>
                      <option>ゲスト12人</option>
                      <option>ゲスト13人</option>
                      <option>ゲスト14人</option>
                      <option>ゲスト15人</option>
                      <option>ゲスト16人</option>
                  </select> 
                </div> 
                 <button type="submit" class="btn btn-danger ">はじめる</button>  
              </form>
            </div>
          </div>
        </div>
        </div>
      </div>
    </div>
  
<div class="flex1_div">
    <div class="first_div">
      <h2  style="text-align:center" class="size2" ><b>Airbnbでホストするこれだけの理由</b></h2>
      <p style="text-align:center">どんなお家やお部屋でも、Airbnbなら簡単かつ安全にシェアでき、世界中の旅好きな仲間とつながれます。 予約可能日から料金、ハウスルール、ゲストとの交流程度まで、すべて自分で決めることができます。</p>
    </div>
    <div class="second_div">
      <h2 style="text-align:center" class="size3"><b>困った時も安心</b></h2>
      <p style="text-align:center">万一に備えるUS$1,000,000の財物補償、US$1,000,000の賠償責任保険が全予約に自動付帯。ホストのみなさまと建物・家財の安全をお守りするため全力で取り組んでいます。</p>
    </div>
</div>


<h2   style="text-align:center"  class="px"><b>3ステップでホスティング</b></h2>
<div class="flex1_div">
  <div class="third_div">
    <h3><b>無料でお部屋を掲載</b></h3>
    <p>共有のリビングルームから別荘に至るまで、どんなスペースでも登録料なしで共有しましょう。</p>
  </div>
  <div class="f4_div">
    <h3><b>ホスティング方法を設定</b></h3>
    <p>スケジュール、料金、ゲストへの要件をご自身で選択しましょう。 お困りの際にはいつでもサポートいたします。
    </p>
  </div>
  <div class="f5_div">
    <h3><b>はじめてのゲストが来ます！</b></h3>
    <p>リスティングが掲載されると、条件にかなったゲストから連絡を受けとることができます。 ゲストの到着前に質問があればメッセージを送信できます。</p>
    <button type="button" class="btn btn-link mt-1">ホストを始める方法をチェック</button>
  </div>
</div>
<div><p class="px3">“</p>
    <h2 style="text-align:left" class="px1" >
    「ホスト保証」があったからAirbnb参加を決めたといっても過言でないほどで、被害やトラブルがあったときに頼れるサポートがあるのは本当にありがたいですね。</h2>
  <p style="text-align:left" class="px1">Dennisさんはロンドンのホスト。自由度の高さに魅力を感じています</p>  
  <button type="submit" class="btn btn-outline-dark px1" >ホスト実践例をチェック</button>
</div>
<div class="background-image1">
</div>
<h2 style="text-align: center"class="px"><b>万一の時も安心です</b></h2>
<div class="flex_div">
  <div class="f6_div">
   
    <p class="px4">大切なお家にお迎えする相手選びは、信頼第一で進めたいですよね。 その思いに応えるため、Airbnbでは宿泊者に求める厳格な要件をホスト自身の手で設定し、滞在前にお互い交流できるシステムを採用しています。 万一のトラブルのときには、Airbnbが全力でサポートします。 建物・家財の被害は「ホスト保証」、賠償責任は「ホスト補償保険」でカバー。ホストのみなさまのあらゆるシチュエーションに対処しています。</p>
    <button type="button" class="btn btn-link mt-1 px2">ホストを守るAirbnbの仕組みをチェック</button>
  </div>
  <div class="f7_div">
    <ul> 
      <li>予約前に政府発行の身分証明書を求める権限</li>
      <li>ハウスルールに同意しないと泊まれない</li>
      <li>過去の宿泊のレビューもばっちり読める</li>
      <li>財物損害は¥100,000,000まで無料で補償</li>
      <li>$1,000,000の賠償責任保険が無料で付帯</li>
      <li>24時間365日対応グローバルカスタマーサポート</li>

    </ul>


  </div>
  

</div>
    

</div>
<div class="background-image2">
</div>

</body>
</html>

.px {
  font-size: 320%;
  padding-top: 8%;
  padding-bottom: 5%;
}
.size1{
  font-size: 100%;
}
.size2{
  font-size: 170%;
  
}
.size3{
  font-size: 170%;
}
.background-image{
  background-image: url(../airbnb.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding-bottom:33%
}
.flex1_div {
  display: flex;
  justify-content: center;
}
.first_div {
  display: inline-block;
  width: 24%;
  padding:0.3%;
  margin: 0 10px 0 0;
  }
  .second_div {
    display: inline-block;
    width: 24%;
    padding:0.3%;
    margin: 0 10px 0 0;
    }
    .third_div{
      display: inline-block;
      width: 16%;
      padding:0.3%;
      margin: 0 10px 0 0;
    }
    .f4_div{
      display: inline-block;
      width: 16%;
      padding:0.3%;
      margin: 0 10px 0 0;
    }
    .f5_div{
      display: inline-block;
      width: 16%;
      padding:0.3%;
      margin: 0 10px 0 0;
    }
    .px1{
      width: 32%;
      padding-left: 10%;
    }
    .px2{
      padding-left: 10%;
    }
    .background-image1{
      background-image:url(../airbnb3.png);
      height:80%;
    }
    .form-control{
      text-align: left
    }
    .form-group{
      width: 100%;
    }
    .clear_form:after{
      content: "";
      display: block;
      clear: both;
    }
    .px3{
      font-size: 500%;
      color:orange;
      padding-left: 10%;
    }
    ul {
      background: white;
      padding: 0 0.5em;
      position: relative;
    }
    
    ul li {
      line-height: 1.5;
      padding: 0.5em 0 0.5em 1.5em;
      border-bottom: 2px solid white;
      list-style-type: none!important;
    }
    
    ul li:before {
      font-family: "Font Awesome 5 Free";
      content: "\f00c";/*アイコン種類*/
      position: absolute;
      left : 1.0em; /*左端からのアイコンまで*/
      color: #668ad8; /*アイコン色*/
    }
    
    ul li:last-of-type {
      border-bottom: none;/*最後の線だけ消す*/
    }
  
    .f6_div{
     /* display: inline-block;*/
      width: 45%;
      padding:0.3%;
      margin: 0 10px 0 0;
    }
    .f7_div{
      /*display: inline-block;*/
      width: 30%;
      padding:0.3%;
      margin: 0 10px 0 0;
    }

    /*.px4{
      width: 34%;
      padding-left: 10%;
    }*/

    h2.px{
      text-align: center;
    }
    .flex_div{
      max-width: 1000px;
      margin: 0 auto;
      display: flex;
      justify-content: space-evenly;
    }
    .background-image2{
      background-image:url(../airbnb6.png);
      height: 80%;
    }
.f8_div{
  display: inline-block;
  width: 16%;
  padding:0.3%;
  margin: 0 10px 0 0;
}
.f9_div{
  display: inline-block;
  width: 25%;
  padding:0.3%;
  margin: 0 10px 0 0;
}
.f10_div{
  display: inline-block;
  width: 22%;
  padding:0.3%;
  margin: 0 10px 0 0;
}
.font1{
  font-family: 'Jost', sans-serif;
font-family: 'Montserrat', sans-serif;
  font-size: 300%;
}

追記：読み込み権限の画像の追記しました。

new1ro

2020/05/01 14:21 編集

階層やソースコードのキャプチャの追加ありがとうございます。目視ですが問題なさそうに見えます。・「Bootstrapの練習.css」が読み込めていない、ということはありませんか? ・「airbnb.png」の読み込み権限がないのではないかと思われます。　本人ではなく「everyone」などすべての人に対して読み込み権限を付与する必要があります。　その点、回答の[3]に画像を追加しましたのでご確認お願いします。

writegrint

2020/05/01 14:40

CSSはほかの機能が動作しているので、問題ないです。読み込み権限は、おっしゃる通り、everyoneにはなっていないです。改善方法を教えて頂きたいです。

new1ro

2020/05/01 20:32 編集

キャプチャがほしいです。 > everyoneにはなっていない「everyone」が存在しないという理解で合っていますか? もしかしたら、名前が違うのかもしれません。 ---- Macの設定で、右下の鍵アイコンと、左下の「+」アイコンが操作するUIと思います。↓このあたり参考になるでしょうか? https://support.apple.com/ja-jp/guide/mac-help/mchlp1203/mac ---- またAdobe制品を使用できるなら、「airbnb.png」をPhotoshopやXDで開き「別名で保存」をすると権限周りの問題が解決されると思います。 ---- Macでコマンドを使用するスキルがあれば以下の2行を実行すると、 everyone (的なグループ) に読み込み権限を付与できると思います。 cd フォルダのパス chmod 644 airbnb.png

new1ro

2020/05/01 20:57 編集

---- 追加してもらったソースコードを拝見しました！ CSSの1行目付近に、↓があるのですが、これは何ですか? background-image:url(../airbnb.png); CSSと画像が同じ階層なら background-image:url(airbnb.png); です。

new1ro

2020/05/01 20:59

---- CSSのソースコードの、CSSセレクタ部分が切れてしまっているので、どの要素に対して「background-image:url(../airbnb.png);」を指定しているかわかりません。

writegrint

2020/05/02 04:36

CSSコードを追加しました。ご確認お願いします。

new1ro

2020/05/02 08:16

確認しました。フォルダ構成が以下のようになっているのなら、 Bootstrapの練習1.html airbnb.png Bootstrapの練習.css background-image:url(../airbnb.png); を background-image:url(airbnb.png); にしてください。

new1ro

2020/05/06 22:35

↑こちらについて、いかがでしょうか? ファイルパーミッションの話をしてきましたが、「パスが違うから見えない」可能性もあるかもと思います。 VS Codeのキャプチャが古い状態になってしまっていると思います。現在の状態に貼り直してもらってもいいでしょうか?

writegrint

2020/05/06 22:57

貼りなおしました。文字数が多すぎるのでHTMLを写真を載せたい所までにカットしました。

new1ro

2020/05/07 00:16

やはり、同じ階層にあるファイルに「../」でアクセスしているのが問題のように見えます。 background-image: url(../airbnb6.png); を background-image: url(airbnb6.png); にしてみてください。

writegrint

2020/05/07 00:55

やはり../を消すと表示されません。なぜ・・・

new1ro

2020/05/07 04:44 編集

念のため、上記は「表示されていた画像が、表示されなくなった」ということではないですよね? もともと表示されていなかったのが、../を消しても変わらず表示されない、という意味と理解しています。

writegrint

2020/05/07 10:04

なぜかairbnb.pngだけ../をつけると表示されます。

new1ro

2020/05/07 10:45 編集

1階層上のフォルダ (親フォルダ内) に、「airbnb.png」という画像ファイルがないかを探してみてください。というより表示されているなら本件解決ではないでしょうか?

writegrint

2020/05/07 10:48

他の画像ファイルは表示されないんです....

new1ro

2020/05/07 10:51 編集

たぶん、1階層上のフォルダに「airbnb.png」だけがあって (つまりairbnb.pngファイルは2つある)、そのファイルを見に行っているのだと思います。試しに「他の画像」をコピーして、1つ上のフォルダに複製してみてください。 (加えて、回答で進めているファイルへのアクセス権限などファイルの問題も別に存在している可能性はあります)

writegrint

2020/05/07 10:59

表示できました！ありがとうございます！エディターと勘違いして、同じ階層に画像ファイルが張られてませんでした。

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

回答2件

ベストアンサー

パッと思いつくのは以下の3つ理由です。

[1] 画像のパスが間違っている

HTMLファイルとCSSファイルとでフォルダの階層位置が異なる場合、
HTMLファイル側で表示できたパスをそのままCSSファイルに持っていっても表示されません。

background-image: url(airbnb.png);だと、CSSファイルと「airbnb.png」が同じフォルダ内にないとCSS側が認識できません。

[2] 要素の高さが「0」になっている

要素の高さが「0」の場合、画面には何も表示されません。
試しに以下のように高さを指定してみてください。

CSS
1.background-image{
2  background-image: url(airbnb.png);
3  height: 100px; /* 追加してみてください */
4}

[3] 画像の「読み込み権限」がない

上記の2つに比べて、頻度は低いと思うのですが、
特にネット上から拾ってきた画像の場合、権限の問題でブラウザで表示できない場合もあります。

WindowsもMacも、ファイルを右クリックして設定を変更することで挙動が変わるので、
[1]と[2]でうまく行かない場合は調べてみてください。

権限の問題のようなので追記:

[3-1] Mac (もしくはWindows) の設定により「everyone」にアクセス権を付与
https://support.apple.com/ja-jp/guide/mac-help/mchlp1203/mac

[3-2] Adobe製品を利用できるなら、PhotoshopやXDで開いて「別名で保存」

[3-3] Macのターミナルによりアクセス権を付与

cd ファイルがあるフォルダのパス
chmod 664 airbnb.png

投稿2020/04/30 22:04

編集2020/05/01 21:07

new1ro

総合スコア4528

退会済みユーザー

2020/04/30 22:06

素晴らしく丁寧な回答です！

nekora

2020/05/01 00:44

同じく、完璧な回答だと思います。高評価付けさせていただきます

writegrint

2020/05/01 14:19

全部試したんですが、うまくいきません。。。。

new1ro

2020/05/01 20:52

[3-1] [3-2] [3-3] を追記しました。

writegrint

2020/05/02 04:41

winfowsでアクセス権を付与する方法はないのでしょうか。

new1ro

2020/05/02 08:05 編集

Windowsのことですよね? WIndowsも設定で変更できます。(Windowsだったんですね！) https://www2.mouse-jp.co.jp/ssl/user_support2/sc_faq_documents.asp?FaqID=10494 すべての工程を行う必要はありません。 4. まで進んだら「読み取り」にチェックを付けて「OK」ボタンを押下すればいいと思います。 Authenticated Users SYSTEM Adoministrators だけでなく、すべてのユーザーに「読み取り」許可を与えてください。

new1ro

2020/05/02 08:01

もしうまくいかない場合は、アクセス許可のパネルのキャプチャをお願いします

writegrint

2020/05/06 20:38

質問に追記しました。

new1ro

2020/05/06 22:29 編集

ありがとうございます！当方、Windows環境ではないので解決から遠いかもしれませんが、こちら、参考になるでしょうか? https://qiita.com/murashi/items/708acd6b37aaf46b4fec 「グループ名またはユーザー名」のなかに1つしかないのが気になります。本人しかアクセスできない (ブラウザは別ユーザー扱いだったはず..) 設定になっているかもしれません。ほかの、閲覧できている画像ファイルのプロパティと見比べて、違いがないように設定するとアクセス許可の問題がある場合は解決できると思います。

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