背景画像が表示されません。どうすれば表示出来るようになりますか？

解決はしたのですが、解決方法がよく分からなかったので解説お願いします。
【解決】
https://qiita.com/chanayu4771/items/e28fd65ec212c473b0cf
こちらを見て
background: url("../img/gorira.jpeg");
にしたら表示されたのですが、..を付けたら上手く行った理由がよくわかりません。
この..は何の略で、どういう意味があるのかの解説をお願いします。
あと絶対パスのコピペでもダメだった理由を教えてくれると助かります。

【質問】
最近web制作を始めたものです。
HTML,CSSで背景画像が表示されなくて困ってます。
<hero>という部分です。
background: url("img/gorira.jpeg");
を
background-color: aqua;
にしたら、背景は水色になりました。
エディターはvscodeを使っており、相対パスはコピペしたものです。
ググって出てきた問題を検証してみましたが、全部問題なさそうでお手上げです。
クロームで検証してみてダメだったので、safariでも試して見ましたがダメでした。
よろしくお願いします。
【試したもの】
https://itojisan.xyz/trouble/12922/

【HTML】

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ZOOLOPPA</title> <link rel="stylesheet" type="text/css" href="./css/stylesheet.css"> </head> <body> <div class="header"> <div class="navbar"> <div class="logo"> <img src="img/logo.png" alt="ZOOLOPPA"> </div> <div class="global_nab"> <ul> <li><a href="#">動物</a></li> <li><a href="#">zoolopaとは</a></li> <li><a href="#">イベント</a></li> <li><a href="#">よくある質問</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </div> </div> </div>

<div class="hero">
    <div class="lead">
        <h1>この子に当て握手しよう</h1>
        <p>世界最大のふれあい動物園</p>
    </div>
</div>

<div class="content">
    <div class="main">
        <h2>注目の動物</h2>
        <h3>パンダ</h3>
        <p>ジャイアントパンダはマジで最強なんですよ。ほんまに</p>
        <img src="img/panda.jpg" alt="パンダの画像">

        <h3>ゾウ</h3>
        <p>ゾウはマジで大きいんですよ。</p>
        <img src="img/zou.jpeg" alt="ゾウの画像">

        <h3>ライオン</h3>
        <p>ライオンはマジで凶暴なんですよ。トラウマ</p>
        <img src="img/raion.jpeg" alt="ライオンの画像">
    </div>
    <div class="sidebar">
        <h2>秋のペンギン祭り</h2>
        <p>ペンギンに会いに行こう</p>
        <img src="img/pengin.jpeg" alt="ペンギンの画像">

        <h2>秋の大運動会</h2>
        <p>みんなで汗を流しましょう</p>
        <img src="img/club.jpg" alt="クラブの画像">

    </div>
</div>

</body> </html>

【css】
.header {
background:green;
}
.navbar {
max-width: 1140px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}