background-imageが反映されない

Question

boorstrapのチュートリアルを参考に、background-imageを表示させたいのですが、表示できません。

<div class="landing">
        <div class="home-wrap">
            <div class="home-inner">
            </div>
        </div>
    </div>

    <div class="caption text-center">
        <h1>Welcome to Solotravelapp</h1>
        <a class="btn btn-outline-primary btn-lg" href="#">Get Started</a>
    </div>

.home-inner {
    background-image: url(imges/baloon.jpg);
}

url部分に""や''を付けたり、../として試して見たのですが、反映されませんでした。なぜなのでしょうか。

![]
画像は表示されるようになったのですが、このように伸びてしまいます。

.home-inner {
    background-image: url("../images/baloon.jpg");
    background-repeat:no-repeat;
    background-position:center;
    background-size: 100% 500px;
    height:500px;
}

Comments

[Lhankor_Mhy]

imges/baloon.jpg

↑これは合っていますか？↓ではないですか？

images/baloon.jpg

[x_x]

<div class="home-inner">ここに文字を入れるとどうなりますか？</div>

[Wakanaa]

@Lhankor_Mhy様
フォルダの名前ごとimgesになっていたのでフォルダ、ファイルのスペル編集しました。ご指摘ありがとうございます。
まだ画像は表示されないままでした。

[Wakanaa]

＠x_x様
文字だけ表示されました。

[yoshinavi]

問題となっているHTMLファイル、CSSファイル、画像を収めているフォルダ。
これらファイルの位置関係はどうなっていますか？

Answer 1

画像のアスペクト比が期待通りにならない点については、 MDN の表記も参考にしつつ、 background-size: cover; や background-size: contain; を試してみてください。

Answer 2

Pathにダブルクオーテーションをつけ、
高さも与えてみるといかがでしょうか。

.home-inner {
　　background-image: url("imges/baloon.jpg");
　　height: 350px;
}

Comments

[Wakanaa]

ご回答ありがとうございます。
高さは変わったのですが、画像は表示されませんでした。

[hatsu]

質問が多くて恐縮ですが、、
CSSがcss/style.cssのような場合は、パスを../images/baloon.jpgにする必要があります。
ディレクトリの構造を元にパスが正しいでしょうか？
また例えば、https://www.pakutaso.com/shared/img/thumb/KAZUHIRO171013022_TP_V.jpg
のような画像だと表示されるでしょうか？

[Wakanaa]

パスを変えたところ表示されるようになりました！ありがとうございます。
画像が伸びてしまうのはどの部分を編集したら良いのでしょうか？

[hatsu]

.home-inner {
　　background-image: url("imges/baloon.jpg");
　　height: 350px;
}
で現在高さを350pxと指定しているので編集してみてください！

[Wakanaa]

上に追記したコードのように高さなどを編集してみたのですが、上手くいきませんでした。。